样式不适用于HTML5自定义元素

Question

好的，这是一个非常奇怪的案例，我已经找到了一个页面，我可以自定义一个＆＃34; custom＆＃34;标签

<comment>This is a comment</comment>

在制作中，我在html模板中输出一个简单的样式，因此它没有显示出来：

<style type="text/css">
    comment {display:none;}
</style>

奇怪的是，如果我在Chrome的开发工具中编辑<style>节点并添加一些微不足道的东西，比如一个空格......它会突然发挥作用。这是首次加载页面时comment节点样式的图片：

然后这是在我向style元素添加一个空格

之后

有关可能发生的事情的任何想法？

Answer 1

确保注册自定义元素并用短划线（-）分隔：

document.registerElement('x-comment');

您的元素必须包含短划线，否则浏览器将无法将其识别为自定义元素。

来自specs：

  

自定义元素类型标识自定义元素接口，并且是   必须与NCName生产必须匹配的字符序列   包含U + 002D HYPHEN-MINUS字符，不得包含任何字符   大写ASCII字母。 [...]