必須一起編寫定義的 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 允許兩個樹狀結構範圍設定同一個元素的樣式，以下為
指定串聯順序：
- 首先，檢查陰影環境中的樣式。此為「預設」 所有樣式。
- 接著，套用
::part中定義的外部樣式。這就是 「自訂」所有樣式。 - 接著，套用搭配使用
!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 的關係而言，體驗會不一致 。在我們檢查過的功能中，沒有在 回應方式 值得慶幸的是，要提供一致的使用體驗是有限的 列出錯誤和規格問題讓我們一起解決這個問題！ 在此同時，如果您無法順利使用簡介 本文所述的不一致之處。