作成者が定義した 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 つのツリースコープで同じ要素のスタイルを設定できるため、次のようになります。 カスケード順序が指定されている場合:

  1. まず、Shadow コンテキスト内のスタイルを確認します。これが「デフォルト」 決めます。
  2. 次に、::part で定義されている外部スタイルを適用します。これが 「カスタマイズ済み」決めます。
  3. 次に、!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 については、エクスペリエンスに一貫性がなく、 バギー。ここで説明した機能は、どのデバイスでも一貫して動作することはありません ブラウザや仕様に応じて異なります。 幸いなことに、一貫性のあるエクスペリエンスを提供するための差分には限りがあります。 バグと仕様の問題のリスト。この問題を修正しましょう。 それまでの間、この概要をご覧いただくことで、 矛盾している場合があります。