From c326358b3814b723b283b7ba8c5b2f5d71a8e571 Mon Sep 17 00:00:00 2001 From: morita657 Date: Thu, 13 Feb 2020 22:16:31 +0900 Subject: [PATCH 1/6] Translate Shadow DOM styling --- .../6-shadow-dom-style/article.md | 349 ++++++++++++++++++ 1 file changed, 349 insertions(+) create mode 100644 8-web-components/6-shadow-dom-style/article.md 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..a0f00149e2 --- /dev/null +++ b/8-web-components/6-shadow-dom-style/article.md @@ -0,0 +1,349 @@ +# 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 + + + + + + Centered! + + + + Not centered. + +``` + +追加で中央に配置するスタイルは、``の最初のダイアログでのみ適用されます。 + +## :host-context(selector) + +`:host`と同様に、シャドウホストあるいはドキュメントの外側の ancestors にマッチする場合のみ`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) { + /* our slotted
does not match this */ +} + +::slotted(div) p { + /* can't go inside 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 + +``` + +## Summary + +Shadow DOM は`
Name:
From 4b4754a2f7edb130a642d61c8c8de72774cbee8d Mon Sep 17 00:00:00 2001 From: morita657 Date: Mon, 17 Feb 2020 22:41:24 +0900 Subject: [PATCH 4/6] Translate better phrases --- .../6-shadow-dom-style/article.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/8-web-components/6-shadow-dom-style/article.md b/8-web-components/6-shadow-dom-style/article.md index 0a8ba80e83..dddf379c3f 100644 --- a/8-web-components/6-shadow-dom-style/article.md +++ b/8-web-components/6-shadow-dom-style/article.md @@ -48,9 +48,9 @@ Shadow DOM のスタイリングには ` ``` -...そして``パディングなしになるでしょう。 +...``はパディングなしになるでしょう。 `:host`の中で"default"コンポーネントスタイルを設定することができ、さらに簡単にドキュメント内で上書きできるため、この機能はとても便利です。 @@ -117,13 +117,13 @@ Shadow DOM のスタイリングには ` @@ -149,12 +142,10 @@ Shadow DOM のスタイリングには ` Name: `; - } - } - ); + } +}); ``` @@ -178,12 +168,10 @@ Shadow DOM のスタイリングには ` Name: `; - } - } - ); + } +}); ``` @@ -214,12 +201,10 @@ Shadow DOM のスタイリングには ` Name: `; - } - } - ); + } +}); ``` @@ -285,37 +269,32 @@ user-card { ```html run autorun="no-epub" untrusted height=80 @@ -324,7 +303,7 @@ user-card { ``` -## Summary +## サマリ Shadow DOM は` ``` -さらに、``のためにアウタードキュメント内でこのプロパティを定義できます。 +さらに、``のために外側のドキュメント内でこのプロパティを定義できます。 ```css user-card { @@ -316,7 +316,7 @@ Shadow DOM は`