css - 影子 DOM 槽中的继承

Question

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

Note: A non-obvious result of assigning elements to slots is that they inherit from the slot they’re assigned to. Their original light tree parent, and any deeper slots that their slot gets assigned to, don’t affect inheritance.

所以我在想，一旦元素被插入，应用于该元素并可以继承的样式，如 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 有一个颜色分配给它，所以它只会使用那个颜色，根本不使用继承。