diff --git a/8-web-components/6-shadow-dom-style/article.md b/8-web-components/6-shadow-dom-style/article.md new file mode 100644 index 0000000000..6188c18119 --- /dev/null +++ b/8-web-components/6-shadow-dom-style/article.md @@ -0,0 +1,328 @@ +# Shadow DOM スタイリング + +Shadow DOM のスタイリングには ` + + + + + + + Hello! + +``` + +## Cascading + +シャドウホスト(``)はlight DOM の中にあり、CSS ルールに影響されます。 +:host とドキュメントの両方にスタイルされたプロパティがある場合は、ドキュメントのスタイルが優先されます。 + +例えば、ドキュメント内に以下が宣言されている場合は + +```html + +``` + +...``はパディングなしになるでしょう。 + +`:host`の中で"default"コンポーネントスタイルを設定することができ、さらに簡単にドキュメント内で上書きできるため、この機能はとても便利です。 + +例外はローカルプロパティが`!important`とラベル付けされた場合で、この場合はローカルスタイルが優先されます。 + +## :host(selector) + +`:host`と同様に、シャドウホストが`selector`にマッチする場合にのみ適用されます。 +例えば、``を中央に配置したい場合は`centered`属性を持つ場合のみ有効になります。 + +```html run autorun="no-epub" untrusted height=80 + + + + + + + 中央揃えです! + + + + 中央に揃っていません。 + +``` + +追加で中央に配置するスタイルは、``の最初のダイアログでのみ適用されます。 + +## :host-context(selector) + +`:host`と同様ですが、シャドウホストあるいはドキュメントの外側の祖先にマッチする場合のみ`selector`は適用できます。 +例えば、`:host-context(.dark-theme)`は``上に`dark-theme`クラスがある場合のみマッチします。 + +```html + + + ... + +``` + +要約すると、文脈によりますが、メイン要素のコンポーネントをスタイルするために`:host`系統のセレクターを使用することができます。これらのスタイルは（`!important`がない限り）ドキュメントによって上書きすることができます。 + +## スロットコンテンツのスタイリング + +それではスロットがある場合のシチュエーションを考えてみましょう。 +スロットされた要素は light DOM に由来するので、これらの要素はドキュメントスタイルを使用します。ローカルスタイルはスロットされたコンテンツに影響されません。 +以下の例では、ドキュメントスタイルによりスロットされた``は bold で、ローカルスタイルから`background`をとりません。 + +```html run autorun="no-epub" untrusted height=80 + + + +
*!*John Smith*/!*
+ + + +``` + +結果は bold で赤色ではありません。 +もしコンポーネント内でスロットされた要素をスタイリングしたい場合は、二通りの方法があります。 +一つ目の方法は、``自体をスタイリングし、CSS 継承を利用します。 + +```html run autorun="no-epub" untrusted height=80 + +
*!*John Smith*/!*
+ + + +``` + +ここでCSS継承は``とコンテンツの間で作用しているので、`

John Smith

`は bold になります。ただ、CSS自体の中で全てのプロパティが継承されるということではありません。 + +もう一つの方法は、`::slotted(selector)`擬似クラスの使用です。これは二つの条件に基づいた要素に一致します。 + +1. 要素自体が、スロット要素であり、light DOM 由来であること。スロット名は重要ではありません。要素自身がスロットされた要素であり、要素の子でなければ構いません。 +2. 要素が`selector`に一致すること。 + +この場合であれば、::slotted(div)は
を選択します。その子要素ではありません。 + +```html run autorun="no-epub" untrusted height=80 + +
+
John Smith
+
+ + + +``` + +注意して頂きたい点は、`::slotted`セレクタはスロット内でそれ以上降りていくことができない点です。これらの要素は有効ではありません。 + +```css +::slotted(div span) { + /* スロットになる
要素はこれに一致しません。 */ +} + +::slotted(div) p { + /* light DOM内に適用されません。 */ +} +``` + +また、`::slotted`はCSSでのみ使用可能なので、`querySelector`では使用できません。 + +## カスタムプロパティと CSS フック + +メインドキュメントからコンポーネントの内部の要素はどのようにスタイルするのでしょうか？ + +`:host`のようなセレクターは``要素あるいは``要素にルールを適用できますが、それらの中のshadow DOM にはどのようにスタイリングしましょう？ + +ドキュメントからshadow DOM stylesに直接影響するセレクタはありません。しかし、コンポーネントに作用するメソッドを露出するように、スタイリングのためにCSS 変数（カスタムCSSプロパティ）を公開できます。 + +**カスタム CSS プロパティは light とシャドウの両方の内の全てのレベルで存在します。** + +例えば、shadow DOM 内でフィールドをスタイリングするために CSS 変数`--user-card-field-color`を使用でき、さらに外側のドキュメントで値を設定することができます。 + +```html + +
Name:
+
Birthday:
+ +``` + +さらに、``のために外側のドキュメント内でこのプロパティを定義できます。 + +```css +user-card { + --user-card-field-color: green; +} +``` + +カスタム CSS プロパティは shadow DOM を通り、グローバルスコープになるので、インナー`.field`ルールを使用できます。 + +以下が例です。 + +```html run autorun="no-epub" untrusted height=80 + + + + + + + + John Smith + 01.01.2001 + +``` + +## サマリ + +Shadow DOM は`