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

Do custom HTML elements inherit parent CSS styles?

本文关键字：CSS 样式 继承 是否 HTML 元素 自定义      更新时间：2023-09-26

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

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

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

当我使用新的 h1bProto 附加一个孩子时，它会生成一个带有 is="h1-b" 的 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的最佳解决方法是什么？

根据 W3 规范，您不会发疯！

尝试使用自定义的内置元素作为自治自定义 元素将不起作用;也就是说，单击 .key将简单地创建一个没有特殊功能的 HTML 环境 行为。

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

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

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

到的一个原因是大多数机器人不会解析你的JavaScript。因此，他们将面临一个挑战，要弄清楚你的dom中的元素到底是什么。想象一下，如果机器人没有意识到您的<h1-b>元素真的是<h1>元素，您的 SEO 会损失多少！

相关文章：