在 HTML 中创建自定义元素时,子标签是否继承父标签的 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>
你好
这给了我 parent 的 CSS 样式。但是,如果我通过先创建元素然后附加节点来添加节点,则代码如下所示:
var node = document.createElement ("h1-b");
node.textContent = "Hello";
document.body.appendChild (node);
<h1-b>Hello</h1-b>
你好
是我遗漏了什么,还是 child 没有继承 parent 的 CSS 样式?如果他们不这样做,那么最好的解决方法是使用 Shadow DOM 吗?
最佳答案
根据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>
,您的 seo 会损失多少?元素真的<h1>
元素!
关于javascript - 自定义 HTML 元素会继承父 CSS 样式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38386066/