1. Web
  2. CSS
  3. CSS 作用域

CSS 作用域

CSS 作用域模組定義了 CSS 作用域和封裝機制，重點關注 Shadow DOM 作用域機制。

CSS 樣式要麼是全域性作用域，要麼是作用域限定為 影子樹。全域性作用域樣式適用於節點樹中與選擇器匹配的所有元素，包括該樹中的自定義元素，但不適用於構成每個自定義元素的影子樹。選擇器及其相關的樣式定義不會在作用域之間洩露。

在影子樹的 CSS 中，選擇器不會選擇樹之外的元素，無論是全域性作用域還是其他影子樹。每個自定義元素都有自己的影子樹，其中包含構成自定義元素的所有元件（但不包括自定義元素本身或“宿主”）。

有時能夠從影子樹內部的上下文對宿主進行樣式設定會很有用。CSS 作用域模組透過定義以下選擇器實現了這一點：

  • 使影子樹能夠對其宿主進行樣式設定。
  • 使外部 CSS 能夠對 Shadow DOM 中的元素進行樣式設定（但僅當相關自定義元素設定為接受外部樣式時）。

參考

選擇器

指南

Web 元件

Web 元件的介紹 — 各種用於建立可複用 Web 元件的技術 — 這些自定義元素的功能與程式碼的其餘部分是封裝的。

使用 Shadow DOM

Shadow DOM 基礎知識，包括將 Shadow DOM 附加到元素、新增到 Shadow DOM 樹以及樣式設定。

使用模板和插槽

使用 <template> 和 <slot> 元素定義可複用 HTML 結構，並在 Web 元件內部使用該結構。

使用自定義元素

Custom Elements API 介紹，用於建立封裝功能的自定義元素的 JavaScript API。

注意：儘管名稱相似，但 :scope 偽類（表示作為選擇器匹配參考點（或作用域）的元素）是在 選擇器 模組中定義的。它與 CSS 作用域模組無關，後者專注於與 Shadow DOM 作用域機制相關的作用域。

規範

規範
CSS 作用域模組級別 1

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.