影子DOM插槽內的繼承

此處的規範 - https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree有如下注釋。影子DOM插槽內的繼承

注意：將元素分配給插槽的非顯而易見的結果是它們從它們分配給的插槽繼承。他們的原始光樹父親和他們的插槽被分配到的任何更深的插槽不會影響繼承。

所以我想，一旦一個元素被開槽，是可以獲得樣式應用於元素，可以繼承像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仍然是黑色的，但它顯示爲紅色。很明顯，我不是這個規範的意思，或者我正在做一些愚蠢的事情。

有人可以向我解釋這個嗎？

來源

2017-06-15 Praveen Puglia

對不起，該註解意味着該元素從其第一個插槽繼承直接。繼承將仍然正常工作，從更高的插槽，其他陰影元素，託管陰影樹的輕元素等。

此示例不顯示繼承，tho。 h1得到了一個顏色分配給它，所以它會使用它，而不是使用繼承。

來源

2017-06-15 10:04:49 Xanthir

是的。我的壞例子。我會在上面的問題中解決這個問題，所以不會造成混淆。 –

如何演示這種情況？ '和他們的槽被分配到的任何更深的槽。這可能超出了問題的範圍，但是如果有時間的話，能否請你指點我可以找到例子的地方？ –

我對直接從它的第一個插槽'有什麼'感到困惑。另外，我嘗試通過將樣式應用於陰影樹內的'slot'來設置文本節點的樣式，但沒有在那裏繼承。 https://codepen.io/praveenpuglia/pen/jwMmWd –

影子DOM插槽內的繼承

回答

相關問題