CSSシャドウパーツを備えたシャドウドムのスタイリング

Safari 13.1は、CSSシャドウパーツのサポートを導入しました。つまり::part()セレクターは、Chrome、Edge、Opera、Safari、およびFirefoxによってサポートされていることを意味します。この記事では、その用途を調査し、Shadow Domのパッケージ機能を最初に確認します。

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内のボタンには影響しません*/
ボタン{背景色：ライム！重要; }

このように要素をスタイリングすることは良い習慣ではないと思いますが、それは起こります。これが起こったとしても、これらのスタイルは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、
記事、さておき、キャンバス、詳細、埋め込み、
フィギュア、フィガプション、フッター、ヘッダー、hgroup、
メニュー、NAV、出力、ルビー、セクション、サマリー、
時間、マーク、オーディオ、ビデオ{
  マージン：0;
  パディング：0;
  ボーダー：0;
  フォントサイズ：100％;
  フォント：継承;
  垂直アライイン：ベースライン;
}

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

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

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

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

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

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

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

23のカスタムプロパティを数えました。言うまでもなく、これは理想とはほど遠いです。

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

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

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

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

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

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

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

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

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