From c0d290de6a7d9391ab301be76fcf7e28e6a7547c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 19 Jan 2022 01:34:22 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_host-context()/index.md | 109 +++++++++++------------- 1 file changed, 48 insertions(+), 61 deletions(-) (limited to 'files/ja/web/css/_colon_host-context()/index.md') diff --git a/files/ja/web/css/_colon_host-context()/index.md b/files/ja/web/css/_colon_host-context()/index.md index cd6c5f9b94..e284a06e22 100644 --- a/files/ja/web/css/_colon_host-context()/index.md +++ b/files/ja/web/css/_colon_host-context()/index.md @@ -1,31 +1,31 @@ --- title: ':host-context()' -slug: 'Web/CSS/:host-context()' +slug: Web/CSS/:host-context() tags: - ':host-context()' - CSS - - Experimental - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:host-context()' + - 実験的 + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.host-context +translation_of: Web/CSS/:host-context() ---

:host-context() は CSS の擬似クラス関数で、内部で使用される CSS を含むシャドウ DOM のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。

+**`:host-context()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、内部で使用される CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。 -

言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。

+言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。 -

典型的な使い方としては、子孫のセレクター式 (例えば h1) を使って、 <h1> の中にあるカスタム要素のインスタンスのみを選択することができます。もう一つの典型的な使用法は、内部要素が任意の子孫要素のクラスや属性に反応するようにすることです。例えば、 .dark-theme クラスが <body> に適用されたときに、異なるテキスト色を適用することができます。

+典型的な使い方としては、子孫のセレクター式 (例えば `h1`) を使って、 `

` の中にあるカスタム要素のインスタンスのみを選択することができます。もう一つの典型的な使用法は、内部要素が任意の子孫要素のクラスや属性に反応するようにすることです。例えば、 `.dark-theme` クラスが `` に適用されたときに、異なるテキスト色を適用することができます。 -

注: これはシャドウ DOM の外で使用した場合、効果がありません。

+> **Note:** これはシャドウ DOM の外で使用した場合、効果がありません。 -

/* Selects a shadow root host, only if it is
-   a descendant of the selector argument given */
+```css
+/* 与えられたセレクター引数の子孫である場合のみ、
+   シャドウルートホストを選択します。 */
 :host-context(h1) {
   font-weight: bold;
 }
@@ -34,8 +34,8 @@ translation_of: 'Web/CSS/:host-context()'
   font-weight: bold;
 }
 
-/* Changes paragraph text color from black to white when
-   a .dark-theme class is applied to the document body */
+/* .dark-theme クラスが文書の body に適用されているとき、
+    段落のテキストの色を黒から白に変更します。 */
 p {
   color: #000;
 }
@@ -43,25 +43,28 @@ p {
 :host-context(body.dark-theme) p {
   color: #fff;
 }
-

+``` -

構文

+## 構文 {{CSSSyntax}} -

例

+## 例 -

シャドウホストの選択的なスタイル付け

+### シャドウホストの選択的なスタイル付け -

以下のスニペットは host-selectors example から取ったものです。 (ライブ版もあります).

+以下のスニペットは [host-selectors の例](https://github.com/mdn/web-components-examples/tree/master/host-selectors)から取ったものです ([ライブ版もあります](https://mdn.github.io/web-components-examples/host-selectors/)。 -

この例には、単純なカスタム要素 — <context-span> — があり、テキストを囲むことができます。

+この例には、単純なカスタム要素 — `` — があり、テキストを囲むことができます。 -

<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>

+```html +

Host selectors example

+``` -

要素のコンストラクターの中で、 style および span 要素を生成し、 span の中をカスタム要素の内容で埋め、 style 要素をいくつかの CSS 規則で埋めます。

+要素のコンストラクターの中で、 `style` および `span` 要素を生成し、 `span` の中をカスタム要素の内容で埋め、 `style` 要素をいくつかの CSS 規則で埋めます。 -

let style = document.createElement('style');
+```js
+let style = document.createElement('style');
 let span = document.createElement('span');
 span.textContent = this.textContent;
 
@@ -74,37 +77,21 @@ style.textContent = 'span:hover { text-decoration: underline; }' +
                     ':host-context(h1):after { content: " - no links in headers!" }' +
                     ':host-context(article, aside) { color: gray; }' +
                     ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';

- -

:host-context(h1) { font-style: italic; } および :host-context(h1):after { content: " - no links in headers!" } の規則は <h1> の中にある <context-span> 要素 (このインスタンスのシャドウホスト) のインスタンスをスタイル付けします。これは設計上、 <h1> 内部にカスタム要素が現れるべきではないことを明確にするために使用しています。

- -

仕様書

- - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{ SpecName('CSS Scope', '#host-selector', ':host-context()') }}	{{ Spec2('CSS Scope') }}	初回定義

- -

ブラウザーの互換性

- -

` の中にある `` 要素 (このインスタンスのシャドウホスト) のインスタンスをスタイル付けします。これは設計上、 `
` 内部にカスタム要素が現れるべきではないことを明確にするために使用しています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{cssxref(":host")}} +- {{cssxref(":host()")}} -- cgit v1.2.3-54-g00ecf