这里的规范 - https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree有如下注释 .
注意：向插槽分配元素的一个非显而易见的结果是它们从它们分配给的插槽继承 . 他们原来的轻树父，以及他们的插槽被分配到的任何更深的插槽，都不会影响继承 .
所以我想一旦一个元素被插入，那么应用于该元素的样式可以像 color 或 background-color 那样继承，赢得't inherit from it'的轻型DOM父级 .
但是，在以下示例中，这样做 .
这是我的代码 .
class CustomTitle extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = "<slot name='title'></slot>";
}
}
window.customElements.define("custom-title", CustomTitle);
custom-title {
border: 2px solid;
display: block;
color: red;
}
<custom-title>
<h1 slot='title'>Hi There!</h1>
</custom-title>
我的期望是 h1 仍然是黑色但它显示为红色 . 显然，我不是规范意味着什么，或者我正在做一些愚蠢的事情 .
有人可以向我解释一下吗？
1 回答
抱歉，该注释意味着该元素直接从其第一个插槽继承 . 继承仍然可以正常工作，从较高的插槽，其他阴影元素，承载阴影树的轻元素等
这个例子没有显示继承，tho . h1有一个分配给它的颜色，所以它只是使用它，而不是使用继承 .