From a70e79de3a392914ce5aa790ce56295faed73141 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 02:06:45 +0900 Subject: 擬似要素の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_doublecolon_slotted/index.html | 111 ----------------------- files/ja/web/css/_doublecolon_slotted/index.md | 111 +++++++++++++++++++++++ 2 files changed, 111 insertions(+), 111 deletions(-) delete mode 100644 files/ja/web/css/_doublecolon_slotted/index.html create mode 100644 files/ja/web/css/_doublecolon_slotted/index.md (limited to 'files/ja/web/css/_doublecolon_slotted') diff --git a/files/ja/web/css/_doublecolon_slotted/index.html b/files/ja/web/css/_doublecolon_slotted/index.html deleted file mode 100644 index dab52cf344..0000000000 --- a/files/ja/web/css/_doublecolon_slotted/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: '::slotted()' -slug: 'Web/CSS/::slotted' -tags: - - '::slotted' - - CSS - - Reference - - ウェブ - - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::slotted' ---- -
{{ CSSRef }}
- -

::slotted() は CSS の 疑似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

- -

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。

- -
/* スロット内に配置された任意の要素を選択 */
-::slotted(*) {
-  font-weight: bold;
-}
-
-/* スロット内に配置された <span> 要素を選択 */
-::slotted(span) {
-  font-weight: bold;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

- -

このデモでは、３つのスロットを持つ単純なテンプレートを使用します。

- -
<template id="person-template">
-  <div>
-    <h2>Personal ID Card</h2>
-    <slot name="person-name">NAME MISSING</slot>
-    <ul>
-      <li><slot name="person-age">AGE MISSING</slot></li>
-      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
-    </ul>
-  </div>
-</template>
- -

カスタム要素 — <person-details> — は以下のように定義されています。

- -
customElements.define('person-details',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      let template = document.getElementById('person-template');
-      let templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({mode: 'open'});
-
-      let style = document.createElement('style');
-      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
-                           'h2 { margin: 0 0 10px; }' +
-                           'ul { margin: 0; }' +
-                           'p { margin: 10px 0; }' +
-                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
-
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(templateContent.cloneNode(true));
-  }
-})
- -

style 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (::slotted(*))、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

- -

この要素がページに挿入されると、以下のように見えます。

- -
<person-details>
-  <p slot="person-name">Dr. Shazaam</p>
-  <span slot="person-age">Immortal</span>
-  <span slot="person-occupation">Superhero</span>
-</person-details>
- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_slotted/index.md b/files/ja/web/css/_doublecolon_slotted/index.md new file mode 100644 index 0000000000..dab52cf344 --- /dev/null +++ b/files/ja/web/css/_doublecolon_slotted/index.md @@ -0,0 +1,111 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +tags: + - '::slotted' + - CSS + - Reference + - ウェブ + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

::slotted() は CSS の 疑似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

+ +

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。

+ +
/* スロット内に配置された任意の要素を選択 */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* スロット内に配置された <span> 要素を選択 */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

+ +

このデモでは、３つのスロットを持つ単純なテンプレートを使用します。

+ +
<template id="person-template">
+  <div>
+    <h2>Personal ID Card</h2>
+    <slot name="person-name">NAME MISSING</slot>
+    <ul>
+      <li><slot name="person-age">AGE MISSING</slot></li>
+      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
+    </ul>
+  </div>
+</template>
+ +

カスタム要素 — <person-details> — は以下のように定義されています。

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

style 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (::slotted(*))、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

+ +

この要素がページに挿入されると、以下のように見えます。

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortal</span>
+  <span slot="person-occupation">Superhero</span>
+</person-details>
+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf