シャドー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には色が割り当てられているので、それを使用し、継承を全く使用しません。