作者定義的 CSS 名稱和 shadow DOM：詳細規格和實際應用

Noam Rosenthal

必須一起編寫定義的 CSS 名稱和 shadow DOM。 不過，瀏覽器有時會與規格不一致， 而且每個 CSS 名稱的一致性也略有不同。

本文將說明作者定義的 CSS 名稱目前運作方式 能做為整體改善方向 才能確保資料互通性

什麼是作者定義的 CSS 名稱？

作者定義的 CSS 名稱是相對舊的 CSS 語法機制，最初 導入 @keyframes 規則，並將 <keyframe-name> 定義為 自訂 ID 或字串這個概念的目的是透過宣告 而是在樣式表的某個部分進行參照，然後以其他部分參照此內容

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

其他使用 CSS 名稱的 CSS 功能包括字型、屬性宣告 以及更多近期的檢視轉換、錨點位置和 以捲動為準的動畫下列非完整資料表包含名稱 Chrome 會檢查 Deployment 的狀態

功能 名稱宣告 名稱參照
主要畫面格 @keyframes animation-name
字型 @font-face { }
@font-palette-values		 font-family
font-palette
屬性宣告 @property 任何自訂屬性
查看轉場效果 view-transition-name
view-transition-class		 ::view-transition-group()
錨定位置 anchor-name position-anchor
捲動觸發的動畫 animation-timeline view-timeline-name
scroll-timeline-name
計數器樣式 @counter-style
Counter-reset
counter-set
counter-increment		 list-style
容器查詢 container-name @container
CSS 變數 --something var(--something)
頁面 @page

如表格所示，CSS 名稱通常會有對應的 CSS reference：例如，animation-name 是對 @keyframes 的參照。 名稱。CSS 名稱與 DOM 中定義的名稱 (例如屬性) 不同 和標記名稱，這些屬性會經由 樣式表。

名稱與 shadow DOM 的關係

雖然 CSS 名稱可用來在 文件或樣式表，則 Shadow DOM 是 相反地能封裝關係，避免外洩 能擁有自己的命名空間

結合 CSS 名稱和 shadow DOM 後，組合元件的使用體驗 網頁元件應具有足夠的特色，力求靈活，但功能受限 才要保持穩定的效能

這在理論上很不錯。實務上，瀏覽器採用 CSS 的方式不一致 名稱與 shadow DOM 彼此交互運作，因為兩者的特徵都相同 瀏覽器、瀏覽器，以及功能與規格之間的連線。

名稱和陰影 DOM 應如何搭配運作

如要瞭解問題所在，瞭解 CSS 的這些部分 理論上都應該共同合作

通則

如要瞭解 CSS 名稱在不同陰影層間的行為，的一般規則如下： CSS 範圍設定等級 1 規格。 總結：CSS 名稱在其定義的範圍內屬於全域性質， 這可以透過子系陰影樹存取，但無法透過同層或 以及祖系陰影請注意，這與網路平台的名稱不同 元素 ID，封裝在同一個樹狀結構範圍內。

以下規則例外：@property

與其他 CSS 名稱不同，CSS 屬性「不會」以 shadow DOM 封裝。 相反地，這些是在不同陰影間傳遞參數的常見方式 樹木 如此一來 @property 描述元 特殊：這應該視為文件全域型別宣告， 會定義特定具名屬性的行為。因為房源 混合使用屬性宣告，將產生非預期的 因此，系統將指定 @property 宣告加以簡化及解析 自動補上文件順序

規則與「::part」搭配運作的方式

陰影零件 對父樹內的元素公開。如此一來， 父項樹狀結構可以存取該元素，並使用 ::part 設定樣式。 元素。

由於 ::part 允許兩個樹狀結構範圍設定同一個元素的樣式，以下為 指定串聯順序：

  1. 首先，檢查陰影環境中的樣式。此為「預設」 模型的風格
  2. 接著，套用 ::part 中定義的外部樣式。這是 「自訂」所有樣式。
  3. 接著，套用搭配使用 !important 定義的所有內部樣式。 這樣一來，自訂元素就能宣告 部分無法由 ::part 自訂。

這表示在 shadow DOM 中無法參照 ::part，因為 ::part 是主機範圍樣式，而非陰影範圍 。例如：

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

規則應與內嵌樣式搭配運作的方式

與 ::part 不同，具有 style 屬性的內嵌樣式，或是 範圍限定為使用指令碼設定樣式，範圍所涵蓋的元素 的存取範圍這是因為要對必要的元素套用樣式 元素控點，進而指向陰影根目錄本身。

CSS 名稱和 shadow DOM 如何搭配運作

雖然上述規則定義明確且一致 不一定會反映這一點 實際上，@property 以一致的方式與規格的運作方式不同 偵測系統顯示的資訊，而且其他功能有待解決的錯誤 ( 但尚未推出，因此您有時間修正這些錯誤)。

為測試並示範這些功能的實際運作情形，我們建立了 以下頁面： https://css-names-in-the-shadow.glitch.me/. 這個網頁有多個 iframe，每個 iframe 分別著重於其中一項功能，以及測試六種 情境：

  • 外部名稱的外部參照：沒有影子 DOM，這應 這些研究有助於我們找出 能引導後續作業的標準
  • 內部名稱的外部參照：這應該不正確， 表示陰影內容中定義的名稱已外洩。
  • 內部名稱對外部參照：這應該是樹狀範圍名稱的效用 是由影子根繼承
  • 內部名稱的內部參照：這兩個標記值應該有效， 都位於相同範圍
  • ::part 參照外部名稱：這應該有效，因為 ::part 且會在相同範圍內宣告
  • ::part 對內部名稱的參照：這不應執行，因為外部範圍 不會取得在 shadow DOM 中宣告的名稱。

@keyframes

如規格所定義，您應該可以參照主要畫面格名稱 只要 @keyframes 規則位於祖系中 範圍。實際上，所有瀏覽器都不需要實作這項行為，而主要畫面格 您只能在定義範圍內參照該定義。詳情請見 問題 10540。

@property

如規格所定義，任何 @property 宣告將 合併至文件範圍不過，目前在所有瀏覽器中 在文件範圍內宣告@property，並在@property 並忽略影子根
請參閱問題 10541。

瀏覽器相關錯誤

其他功能在各種瀏覽器上無法呈現一致的行為：

  • @font-face 已壓平移至 Safari 的根範圍。
  • Chromium 不允許在陰影根目錄中沿用 @anchor-name 規則
  • @scroll-timeline-name 和 @view-timeline-name 的範圍未正確 開啟「::part」(也在 Chromium 中)。
  • 沒有任何瀏覽器允許在陰影根目錄中宣告 @font-palette-values。
  • view-transition-class 可在陰影根層級 (轉場效果) 中定義 就在 shadow-root 之外)。
  • Firefox 允許 ::part 存取內部陰影名稱 (容器查詢、 主要畫面格)。
  • Firefox 和 Safari 不會遵循陰影根層級的 @counter-style。

請注意，counter-reset、counter-set、counter-increment 略微 但由於這是隱含名稱 以及宣告 CSS 屬性 確立了一套既定規則，並且經過完善測試。

結論

糟糕的是，在查看目前互通性狀態的快照時 就 CSS 名稱和 shadow DOM 的關係而言，體驗會不一致 。在我們檢查過的功能中，沒有在 回應方式 值得慶幸的是，要提供一致的使用體驗是有限的 列出錯誤和規格問題讓我們一起解決這個問題！ 在此同時，如果您無法順利使用簡介 本文所述的不一致之處。