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

Question

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

以下是我的测试用例，来自Chrome：

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

当我使用新的h1bProto追加一个孩子时，它会生成一个带有=＆＃34; h1-b＆＃34;的H1标签，例如：

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>生成标记的Aka将不会应用<h1>标记的样式或行为。相反，您必须创建一个<h1>标记，并将is属性设置为自定义元素的名称。我在规范中链接到的部分实际上很好地解释了如何创建标记。

总而言之，你只需要像这样制作你的元素：

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

我想到的一个原因是，大多数机器人都不会解析您的JavaScript。因此，他们将面临挑战，找出你的dom中的元素究竟是什么。想象一下，如果机器人没有意识到你的<h1-b>元素真的是<h1>元素，那么你的seo会多少钱！