::slotted()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

試してみましょう

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

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

構文

css
::slotted(<compound-selector>) {
  /* ... */
}

例

スロット化された要素を強調

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

html
<template id="person-template">
  <div>
    <h2>個人 ID カード</h2>
    <slot name="person-name">氏名不明</slot>
    <ul>
      <li><slot name="person-age">年齢不明</slot></li>
      <li><slot name="person-occupation">職業不明</slot></li>
    </ul>
  </div>
</template>

カスタム要素 <person-details> は以下のように定義されています。この場合、 JavaScript でスタイルを追加していますが、 <template> 内の <style> ブロックで追加しても同じ効果があります。

js
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; } " +
        "::slotted(span) {text-decoration: underline;} ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

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

このマークアップには 3 つのカスタム要素が記載されています。その中には、不正なスロット名を持ち、 <template> とはソース順序が異なるカスタム要素も含まれています。

html
<person-details>
  <p slot="person-name">ワンダーウーマン</p>
  <span slot="person-age">不死身</span>
  <span slot="person-occupation">スーパーヒーロー</span>
</person-details>

<person-details>
  <p slot="person-name">Malala Yousafzai</p>
  <span slot="person-age">17</span>
  <span slot="person-occupation">活動家</span>
</person-details>

<person-details>
  <span slot="person-age">44</span>
  <span slot="not-a-slot-name">タイムトラベラー</span>
  <p slot="person-name">ドクターフー</p>
</person-details>

結果

仕様書

Specification
CSS Scoping Module Level 1
# slotted-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報