From f9eb5bfe42eb9ab99a99ca26ac826d7dabcbc247 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 12:40:37 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_doublecolon_slotted/index.md | 130 ++++++++++++------------- 1 file changed, 62 insertions(+), 68 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_doublecolon_slotted/index.md b/files/ja/web/css/_doublecolon_slotted/index.md index dab52cf344..cec0b89c3a 100644 --- a/files/ja/web/css/_doublecolon_slotted/index.md +++ b/files/ja/web/css/_doublecolon_slotted/index.md @@ -1,56 +1,64 @@ --- title: '::slotted()' -slug: 'Web/CSS/::slotted' +slug: Web/CSS/::slotted tags: - '::slotted' - CSS - - Reference - - ウェブ - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::slotted' + - 擬似要素 + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.slotted +translation_of: Web/CSS/::slotted --- -
{{ CSSRef }}
+{{ CSSRef }} -

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

+**`::slotted()`** は [CSS](/ja/docs/Web/CSS) の [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくは[テンプレートとスロットの利用](/ja/docs/Web/Web_Components/Using_templates_and_slots)をご覧ください)。 -

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

+これは [shadow DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。 -
/* スロット内に配置された任意の要素を選択 */
+```css
+/* スロット内に配置された任意の要素を選択 */
 ::slotted(*) {
-  font-weight: bold;
+  font-weight: bold;
 }
 
 /* スロット内に配置された <span> 要素を選択 */
 ::slotted(span) {
-  font-weight: bold;
+  font-weight: bold;
 }
-
+``` -

構文

+## 構文 {{csssyntax}} -

例

+## 例 + +###スロット化された要素を強調 -

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

+以下のコードの断片は [slotted-pseudo-element](https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element) デモから取られたものです ([ライブでもご覧ください](https://mdn.github.io/web-components-examples/slotted-pseudo-element/))。 -

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

+このデモでは、 3 つのスロットを持つ単純なテンプレートを使用します。 -
<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>
+```html + +``` -

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

+カスタム要素 — `` — は以下のように定義されています。 -
customElements.define('person-details',
+```js
+customElements.define('person-details',
   class extends HTMLElement {
     constructor() {
       super();
@@ -69,43 +77,29 @@ translation_of: 'Web/CSS/::slotted'
       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")}}

- -

関連情報

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

Dr. Shazaam

+ Immortal + Superhero + +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) -- cgit v1.2.3-54-g00ecf