Shadow DOM の ::content/:slotted 擬似要素の公開

Web コンポーネントの重要な側面である Shadow DOM には、次のような機能が導入されています。コンテンツをカプセル化して分離する新しい方法。このレルム内では、::content (以前は ::slotted として知られていました) 擬似要素が、ShadowTree 内の分散ノードの詳細なスタイルを有効にする上で重要な役割を果たします。

Introducing ::content

::content 疑似要素は、要素内に分散されたノードに適用されるセレクターです。これは (現在は ) タグと並行して動作し、LightDOM から ShadowDOM へのコンテンツの挿入を容易にします。

分散ノードのターゲット

When 要素マークアップ内の元の位置から ShadowTree 内の別の場所に移動すると、それらは分散ノードになります。 ::content では、これらの分散ノードを特定のターゲットに設定することができ、新しい場所に限定されたスタイルを適用する方法が提供されます。

Example

次のコードを考えてみましょう。スニペット:

#slides::content img {
    width: 25%;
    float: left;
}

ここでは、::content セレクターを使用して、#slides 要素内の分散画像をターゲットにしています。これらのイメージに適用されるスタイルは、ShadowDOM に存在するコピーにのみ影響し、LightDOM から分離されます。

結論

::コンテンツ (または ::slotted) ) pseudo-element は Shadow DOM に不可欠なツールであり、Web 開発者に LightDOM 内の要素を妨げることなく分散ノードを詳細にスタイル設定する柔軟性を与えます。これにより、懸念事項のカプセル化と分離が可能になり、Web アプリケーションの全体的な保守性と柔軟性が向上します。