Safari 13.1は、CSSシャドウパーツのサポートを?qū)毪筏蓼筏?。つま?code>::part()セレクターは、Chrome、Edge、Opera、Safari、およびFirefoxによってサポートされていることを意味します。この記事では、その用途を調(diào)査し、Shadow Domのパッケージ機能を最初に確認(rèn)します。

Shadow Domパッケージの利點

Giffgaffでは、さまざまな方法でさまざまな人々によって書かれた大量のCSSコードがあります。これがもたらす問題を見てみましょう。

紛爭の命名

クラス名の競合は、CSSで発生する傾向があります。開発者は、 .priceというクラス名を作成できます。別の開発者（そしておそらく同じ人）は、それを知らずに同じクラス名を使用することができます。

CSSはエラーを促しません。これで、このクラスのHTML要素は、2つのまったく異なるもののスタイルを受け取ります。

Shadow Domはこの問題を解決します。感情やスタイルのコンポーネントなどのCSS-in-JSライブラリも、 .bwzfXHなどのランダムなクラス名を生成することにより、さまざまな方法でこの問題を解決します。これは確かに紛爭を避けるのに役立ちます！ただし、CSS-in-JSは、他の方法でコンポーネントを壊すことを誰も妨げません。例えば……

基本的なスタイルとCSSリセット

HTML要素セレクターを使用できます（例：<button></button>そして<div>）スタイルを適用します。これらのスタイルはコンポーネントを壊す可能性があります。 Shadow Domは、（ほぼ）完全にカプセル化された唯一のメカニズムです。各コンポーネントがカプセル化されているため、コンポーネントが亂雑です<code>!importantコードベースでも一貫性があることを保証できます。

 /*これはシャドウdom內(nèi)のボタンには影響しません*/
ボタン{背景色：ライム！重要; }

このように要素をスタイリングすることは良い習(xí)慣ではないと思いますが、それは起こります。これが起こったとしても、これらのスタイルはShadow Domに影響しません。

色、フォント、ラインの高さなどの継承可能なスタイルは、シャドウDOMで依然として継承されていることに注意してください。これを防ぐには、 all: initialまたはできればall: revert 。

HTML要素に直接適用されるCSSの一般的な例を見てみましょう。 Eric Meyerのリセットコードを検討してください。

 html、body、div、span、applet、object、iframe、
H1、H2、H3、H4、H5、H6、P、BlockQuote、Pre、
abbr、頭字語、アドレス、ビッグ、引用、コード、
del、dfn、em、img、ins、kbd、q、s、samp、
Small Strike Strong Sub Sup TT var
b、u、i、center、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、レジェンド、
テーブル、キャプション、tbody、tfoot、thead、tr、th、td、
記事、さておき、キャンバス、詳細(xì)、埋め込み、
フィギュア、フィガプション、フッター、ヘッダー、hgroup、
メニュー、NAV、出力、ルビー、セクション、サマリー、
時間、マーク、オーディオ、ビデオ{
  マージン：0;
  パディング：0;
  ボーダー：0;
  フォントサイズ：100％;
  フォント：継承;
  垂直アライイン：ベースライン;
}

使用しているコンポーネントが、ユーザーエージェントのデフォルトマージンとパディング値を使用するとどうなりますか？このリセットは、これらのデフォルト値が実際にクリアされているため、破損しているように見える可能性があります。

Shadow Domは、これらの問題を回避する方法です。 Shadow Domは、どのコードベースに関係なく、コンポーネントが予想どおりにレンダリングされることを完全に確信できるようになります。繰り返しますが、コンポーネントのみに使用されるコードは、厄介なクラスの命名規(guī)則なしで、他のものに誤って影響を與えません。 Shadow Domは、他の方法では達(dá)成できないカプセル化レベルを提供します。

パッケージは素晴らしいですが、コンポーネントをテーマにしてカスタマイズ可能にしたいと考えています。 ::partセレクターはこれをはるかに簡単にします。

スタイルシャドウドム:: part（）

これまでのところ、CSSが外部の影DOMからカスタム要素スタイルを変更できる唯一の方法は、CSSカスタムプロパティを使用することです。厳格な設(shè)計システムでは、限られた変更のみを許可したいだけです。これは理想的かもしれません。コンポーネントをより一般的にしたい場合は、問題を引き起こす可能性があります。カスタムプロパティを使用して、スタイルを提供する各CSS屬性を定義する必要があります。非常に複雑に聞こえます。

擬似クラス（ :hoverなど）に基づいてさまざまな方法でコンポーネントをスタイリングしたい場合、狀況はさらに複雑になります?；镜膜?、私たちは多くのカスタムプロパティになります。 Ionic（オープンソースのWebコンポーネントのセット）の例を見てみましょう。イオンボタンコンポーネントで定義されているすべてのカスタムプロパティをご覧ください。

お気軽にチェックしてください。

23のカスタムプロパティを數(shù)えました。言うまでもなく、これは理想とはほど遠(yuǎn)いです。

以下は::part()を使用して要素をスタイリングする例です。

この例では、色、境界線、背景の色のプロパティを変更しましたが、定義されているカスタムプロパティに制限されることなく、必要なプロパティを使用できます。次のような擬似クラスも使用できることに注意してください:hoverや:focusフォーカスには、コンポーネントのさまざまな狀態(tài)をスタイリングします。

このボタンの例では、コンポーネント全體がスタイル設(shè)定のために公開されますが、Webコンポーネントに複數(shù)のHTML要素が含まれている場合、コンポーネントの選択した部分のみをこのスタイル設(shè)定に公開できます::partこれにより、コンポーネントのユーザーがシャドウツリー內(nèi)の任意の要素をスタイリングすることを防ぎます。コンポーネントの著者は、明示的に開示したいコンポーネントを明らかにする責(zé)任があります。コンポーネントの他の部分は、視覚的な一貫性を維持するか、カスタムプロパティを使用してカスタマイズ可能性を低下させることができます。

それでは、どのようにこれをコンポーネントに設(shè)定しますか？ Webコンポーネントのスタイリングの特定の要素を作成するための::part使用方法を見てみましょう。私たちが行うのは、公開したい要素にpartプロパティを追加することだけです。

<div part="box"> ...</div>
<button>私をクリックしてください</button>

この例では、 div完全なCSSスコープを使用してカスタマイズできます。CSS屬性を変更できます。ただし、ボタンはロックされています。コンポーネント作成者以外の視覚効果を変更することはできません。

HTML要素が複數(shù)のクラス名を持つことができるように、1つの要素には複數(shù)のpart名を持つことができます。

<div part="box thing"> ...</div>

これは、 ::part ：要素の「パート」を公開することにより、他の領(lǐng)域でそれらを保護しながらWebコンポーネントを使用する方法について柔軟性を提供できます。設(shè)計システム、コンポーネントライブラリなど、CSSシャドウパーツが主流になっているという事実は、別のエキサイティングなツールを提供します。