自定义 HTML 元素会继承 parent CSS 样式吗？

Question

在 HTML 中创建自定义元素时，child 标签是否继承了 parent 的 CSS 样式？

这是我的测试用例，来自 Chrome:

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

当我使用新的 h1bProto 添加 child 时，它会生成一个带有 is="h1-b" 的 H1 标签，示例如下：

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

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

你好

这给了我 parents CSS 样式。但是，如果我通过先创建元素然后附加节点来添加节点，则代码如下所示：

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

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

你好

我是不是遗漏了什么，还是child没有继承parent的CSS风格？如果他们不这样做，那么最好的解决方法是使用 Shadow DOM?

Answer 1

根据 W3 spec you aren't going crazy!

Trying to use a customized built-in element as an autonomous custom element will not work; that is, Click me? will simply create an HTMLElement with no special behaviour.

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

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

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

我想到的一个原因是大多数机器人不会解析您的 javascript。因此，他们很难弄清楚 dom 中的元素到底是什么。想象一下，如果机器人没有意识到您的 <h1-b> 元素实际上是 <h1> 元素，您的 seo 将会损失多少！

自定义 HTML 元素会继承 parent CSS 样式吗？

Do custom HTML elements inherit parent CSS styles?

html

javascript

css

custom-controls

你好