From 633d079bcd81795a8258f51ddd3e79f86703ae89 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 09:57:21 +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/index.md | 110 ++++++++++++++-------------------- 1 file changed, 45 insertions(+), 65 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md index 661dccdaea..227804393c 100644 --- a/files/ja/web/css/_colon_host/index.md +++ b/files/ja/web/css/_colon_host/index.md @@ -1,56 +1,54 @@ --- title: ':host' -slug: 'Web/CSS/:host' +slug: Web/CSS/:host tags: - ':host' - CSS - DOM - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - Web Components - - shadow - - shadow dom + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ - ウェブコンポーネント + - shadow - シャドウ DOM - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:host' +browser-compat: css.selectors.host +translation_of: Web/CSS/:host --- -
{{ CSSRef }}
+{{ CSSRef }} -

:host は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

+**`:host`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。 -
-

注: これはシャドウ DOM の外で使われたときには効果がありません。

-
+> **Note:** これはシャドウ DOM の外で使われたときには効果がありません。 -
/* シャドウのルートホストを選択 */
+```css
+/* シャドウのルートホストを選択 */
 :host {
   font-weight: bold;
 }
-
+``` -

構文

+## 構文 -
:host
-
+ :host -

例

+## 例 -

シャドウホストのスタイル付け

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

以下のスニペットは、 host セレクターの例 (ライブでも参照してください) から取りました。

+以下のスニペットは、 [host セレクターの例](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;
 
@@ -63,39 +61,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 { background: rgba(0,0,0,0.1); padding: 2px 5px; } の規則は、文書中の <context-span> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。

- -

仕様書

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

ブラウザーの互換性

- -
-

{{Compat("css.selectors.host")}}

-
- -

関連情報

- - + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +``` + +`:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` のルールは、文書中の `` 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} -- cgit v1.2.3-54-g00ecf