自定义HTML元素是否继承父CSS样式？

Question

在HTML中创建自定义元素时，子标签是否会继承父类的CSS样式？

这是我的测试情况下，从铬：

var h1bProto = document.registerElement ('h1-b', 
{ 
    prototype: Object.create (HTMLHeadingElement.prototype), 
    extends: "h1" 
}); 

当我追加使用它与是= “H1-B” 生成一个H1标签的新h1bProto孩子，例如下面：

var node = document.body.appendChild (new hibProto()); 
node.textContent = "Hello"; 

<h1 is="h1-b">Hello</h1> 

你好

这给了我父母的CSS样式。不过，如果我首先创建的元素，那么追加节点处添加节点，代码如下所示：

var node = document.createElement ("h1-b"); 
node.textContent = "Hello"; 
document.body.appendChild (node); 

<h1-b>Hello</h1-b> 

你好

我失去了一些东西，或者说孩子不继承父的CSS样式？如果他们不这样做，那么使用Shadow DOM的最佳解决方案是什么？

Answer 1

根据W3 spec you aren't going crazy！

尝试使用自定义内置元素作为自主定制 元素不起作用;那就是点击 我？将简单地创建一个HTMLElement，但不会有任何特殊的行为 行为。

也就是说，在您的示例中，使用<h1-b>标记标记不会应用<h1>标记的样式或行为。相反，您必须创建一个<h1>标记，并将is属性设置为您的自定义元素的名称。我在规范中链接到的部分实际上很好地解释了如何创建标签。

一切的一切，你只需要让你的元素，像这样：

我想到的这个

document.createElement("h1", { is: "h1-b" }); 

一个原因是，大多数机器人不分析你的JavaScript。因此，他们会很难确定你的dom中的元素究竟是什么。想象一下，如果一个机器人没有意识到你的元素真的是<h1>元素，你的seo会有多少钱！