影子 DOM 插槽内的继承

Question

这里的规范 - https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree 有如下注释。

注意：将元素分配给槽的一个不明显的结果是它们继承了它们被分配到的槽。它们原来的轻树父级，以及它们的槽被分配到的任何更深的槽，都不会影响继承。

所以我认为一旦一个元素被插入，应用于该元素并且可以像color 或background-color 那样被继承的样式不会从它的轻量级 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 仍然是黑色的，但它显示为红色。显然我不是规范的意思，或者我正在做一些愚蠢的事情。

谁能给我解释一下？

Answer 1

抱歉，该注释意味着该元素直接从它的第一个槽继承。从更高的插槽、其他阴影元素、承载阴影树的轻元素等继承仍将正常工作

这个例子并没有展示继承。 h1 有一个颜色分配给它，所以它只会使用它，而不是使用继承。