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

必須一起編寫定義的 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-resetcounter-setcounter-increment 略微 但由於這是隱含名稱 以及宣告 CSS 屬性 確立了一套既定規則,並且經過完善測試。

結論

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