揭開Shadow DOM 中的::content/:slotted 偽元素

Shadow DOM 是Web 元件的一個關鍵方面，它引入了一種封裝和分離內容的新穎方法。在此領域中，::content（以前稱為 ::slotted）偽元素在啟用 ShadowTree 內的分散式節點的深層樣式方面發揮關鍵作用。

引言 ::content

::content 偽元素是一個選擇器，適用於分佈在元素內的節點。它與 （現在為 ）標籤一起運行，以方便將內容從 LightDOM 插入到 ShadowDOM 中。

定位分散式節點

When 元素從標記中的原始位置移動到 ShadowTree 中的另一個位置，它們成為分散式節點。 ::content 允許對這些分散式節點進行特定定位，從而提供一種應用其新位置獨有的樣式的方法。

範例

考慮以下程式碼片段：

#slides::content img {
    width: 25%;
    float: left;
}

這裡，::content 選擇器用來定位#slides 元素中的分散式映像。套用於這些影像的樣式只會影響 ShadowDOM 中存在的副本，從而提供與 LightDOM 的隔離。

結論

::content（或::slotted ）偽元素是Shadow DOM 中不可或缺的工具，它使Web 開發人員能夠靈活地深度設計分散式節點的樣式，而不會幹擾LightDOM 中的元素。這使得封裝和關注點分離成為可能，從而增強了 Web 應用程式的整體可維護性和靈活性。