合法HTML自定义元素名称是否可含多个连字符？规范解读确认

首先直接给结论：是的，<my-custom-element>这类包含多个连字符的自定义元素名称完全符合HTML规范。你的分析中关于PCENChar允许连字符、因此前后的字符序列可以包含额外连字符的部分是准确的，但有个小误区需要修正。

拆解规范细节 #

我们再仔细看一下PotentialCustomElementName的生成式：

PotentialCustomElementName ::= [a-z] (PCENChar)* '-' (PCENChar)*

这个规则可以拆成三个强制要求：

• 名称必须以小写字母开头（[a-z]）；
• 名称中至少包含一个连字符（也就是规则中间那个强制的'-'）；
• 开头字母之后、强制连字符前后的部分，都可以是任意数量（包括零个）的PCENChar字符——而PCENChar明确包含连字符，这意味着这两个区域都可以加入额外的连字符。

合法与非法的例子 #

合法的自定义元素名称：

• <my-custom-element>：开头是小写m，包含两个连字符（一个是强制位置，另一个在PCENChar序列里），完全合规；
• <a--b>：开头小写a，强制连字符前后都加了额外连字符，符合规则；
• <x.y-z_123>：混合了PCENChar允许的点、连字符、下划线、数字，合规。

非法的例子（包括你提到的误区）：

• <--->：开头是连字符，违反了[a-z]开头的要求，不合法；
• <myelement>：没有任何连字符，不符合必须至少有一个连字符的规则；
• <My-Element>：包含大写字母，PCENChar只允许小写字母，因此非法。

总结 #

只要你的自定义元素名称满足：

1. 以小写字母开头；
2. 至少包含一个连字符（可以在中间任意位置，只要不是开头）；
3. 所有其他字符都属于PCENChar定义的范围（包括额外的连字符、点、下划线等）；
   就是完全合法的HTML自定义元素名称。

内容的提问来源于stack exchange，提问作者Rounin