このページは Cloud Translation API によって翻訳されました。

作成者が定義した CSS 名と Shadow DOM: 仕様上と実際

Noam Rosenthal

作成者が定義した CSS 名と Shadow DOM は連携して動作することが求められます。ただし、ブラウザは仕様に一貫性がなく、 CSS 名ごとに多少の異なる点で一貫性がありません。

この記事では、作成者が定義した CSS 名の動作の現在の状況について説明します。シャドースコープ全体にわたって機能し、改善のガイドとして近い将来に相互運用性を拡張する予定です

作成者が定義した CSS 名とは

作成者が定義した CSS 名は、比較的古い CSS 構文メカニズムで、 @keyframes ルールで導入されました。このルールでは、<keyframe-name> を次のように定義します。 custom-ident または string のいずれかを指定します。このコンセプトの目的は、kubectl の別の部分で参照できます。

/* "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 機能として、フォント、プロパティ宣言、より最近表示した遷移、アンカーの位置設定、スクロールドリブンアニメーションを使用できます。次の包括的なテーブルには名前が含まれていますが、包括的なものではありません。状態を確認します。

機能	名前の申告	名前参照
キーフレーム	`@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 リファレンスをご覧ください。たとえば、animation-name は @keyframes への参照です。表示されます。CSS 名は、属性など DOM で定義されている名前とは異なります。宣言され、参照先のコンテキスト内で参照されます。あります。

名前と Shadow DOM の関係

CSS 名は、CSS の要素間に関係を Shadow DOM はその逆の処理を行います。関係をカプセル化して漏洩を防ぐウェブコンポーネント間で分散できます。

CSS 名と Shadow DOM が 1 つに統合されており、ウェブコンポーネントは、制約を受けながら柔軟に対応できる表現力を十分安定しているはずです

これは理論上は問題ありません。実際のところ、ブラウザの CSS には一貫性がありません。同じゾーン内の機能間では、どちらも Shadow DOM と相互運用できます。ブラウザ間、ブラウザ間、機能と仕様間。

名前と Shadow DOM の連携の仕組み

この問題を理解するには、CSS のこれらの要素がどのように連携する必要があります

一般的なルール

シャドウツリー全体での CSS 名の動作に関する一般ルールは、 CSS スコープレベル 1 の仕様まとめると、CSS 名は、定義されているスコープ内でグローバルです。子孫のシャドウツリーからはアクセスできますが、兄弟または継承されます。これは、ウェブプラットフォームで使用される名前、要素 ID。同じツリースコープ内にカプセル化されています。

このルールの例外: `@property`

他の CSS 名とは異なり、CSS プロパティは Shadow DOM によってカプセル化されません。異なるシャドウ間でパラメータを渡す一般的な手段です。学習します。これにより、 @property 記述子特別な: 宣言型のドキュメントグローバル型宣言のように特定の名前付きプロパティの動作を定義します。宿泊施設が一致している必要があるためプロパティ宣言が一致しないと予期しない結果が発生する @property 宣言はフラット化して解決されるように指定されています。並べ替えられます。

`::part` でのルールの動作

シャドウパート Shadow ツリー内の要素をその親ツリーに公開します。これにより、親ツリーはその要素にアクセスでき、::part を使用してスタイル設定することもできます。要素です。

::part では 2 つのツリースコープで同じ要素のスタイルを設定できるため、次のようになります。カスケード順序が指定されている場合:

まず、Shadow コンテキスト内のスタイルを確認します。これが「デフォルト」決めます。
次に、::part で定義されている外部スタイルを適用します。これが「カスタマイズ済み」決めます。
次に、!important とともに定義された内部スタイルを適用します。これにより、カスタム要素で、特定のプロパティの特定のプロパティがパーツは ::part ではカスタマイズできません。

つまり、Shadow DOM 内の名前を 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 があり、それぞれ 1 つの機能を取り上げ、6 つの iframe をテストしています。シナリオ：

外部名への外部参照: Shadow DOM は含まれないため、説明します。
内部の名前への外部参照: シャドウコンテキストで定義された名前が漏洩したことを意味します。
外部名への内部参照: ツリースコープの名前として機能します。シャドウルートに継承されます
内部名への内部参照: これは、参照は同じスコープです
外部名への ::part 参照: これは ::part と名前は同じスコープで宣言されます。
内部名への ::part 参照: 外部スコープであるため、これは動作しません。 Shadow DOM 内で宣言された名前について知るべきではありません。

`@keyframes`

仕様で定義されているとおり、キーフレーム名を参照できるようにする必要があります。 @keyframes ルールが祖先に含まれている限り、シャドウルート内からあります。実際には、この動作を実装しているブラウザはなく、キーフレーム定義は、それが定義されているスコープ内でのみ参照できます。詳しくは、問題 10540 をご覧ください。

`@property`

仕様で定義されているように、@property の宣言はドキュメントスコープにフラット化されます。しかし現在ではどのブラウザでもドキュメントスコープで @property を宣言し、ドキュメントスコープで @property 宣言シャドウルートは無視されます。
問題 10541 をご覧ください。

ブラウザ固有のバグ

他の機能は、ブラウザ間で一貫した動作ではありません。

Safari では、@font-face がルートスコープにフラット化されます。
Chromium では、シャドウルートの @anchor-name ルールを継承できません
@scroll-timeline-name と @view-timeline-name のスコープが正しくありません ::part（Chromium にも）
どのブラウザも、シャドウルートで @font-palette-values を宣言できません。
view-transition-class は、シャドウルート内で定義できます（シャドウルートの外部にあります）。
Firefox では、::part が内部シャドウ名（コンテナクエリ、あります。
Firefox と Safari で、シャドウルートの @counter-style が認識されません。

counter-reset、counter-set、counter-increment は、それぞれ暗黙的な名前であり、CSS プロパティを宣言するため、確立され、十分にテストされたルールセットがあります

まとめ

ただ、現在の相互運用の状態のスナップショットを調べると、 CSS 名と Shadow DOM については、エクスペリエンスに一貫性がなく、バギー。ここで説明した機能は、どのデバイスでも一貫して動作することはありません ブラウザや仕様に応じて異なります。幸いなことに、一貫性のあるエクスペリエンスを提供するための差分には限りがあります。バグと仕様の問題のリスト。この問題を修正しましょう。それまでの間、この概要は、矛盾している場合があります。