Element: attachShadow() メソッド

attachShadow(options)

element.attachShadow({ mode: "open" });
element.shadowRoot; // ShadowRoot オブジェクトを返す

element.attachShadow({ mode: "closed" });
element.shadowRoot; // null を返す

// その要素用のクラスを作成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクターでは、常にまず super を呼び出す
    super();

    // 要素の親要素に含まれる単語数を数える
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // シャドウルートを作成
    const shadow = this.attachShadow({ mode: "open" });

    // テキストノードを作成し、そこに単語数を追加
    const text = document.createElement("span");
    text.textContent = count;

    // シャドウルートに追加
    shadow.appendChild(text);

    // 要素のコンテンツが変更された際に更新回数をカウント
    this.parentNode.addEventListener("input", () => {
      text.textContent = `Words: ${countWords(wcParent)}`;
    });
  }
}

// 新しい要素を定義
customElements.define("word-count", WordCount, { extends: "p" });

class MyCustomElement extends HTMLElement {
  // この要素のシャドウ DOM を無効化
  static disabledFeatures = ["shadow"];

  constructor() {
    super();
  }

  connectedCallback() {
    // シャドウルートを作成
    // これは例外が発生する
    const shadow = this.attachShadow({ mode: "open" });
  }
}

// 新しい要素を定義
customElements.define("my-custom-element", MyCustomElement);

class MyArticle extends HTMLElement {
  constructor() {
    super();
    // シャドウルートを設定
    this.attachShadow({ mode: "open" /* , slotAssignment: "named" */ });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    // 内部構造とスタイルを定義
    this.shadowRoot.innerHTML = `
      <style>
        .header {
          background-color: plum;
        }
        .meta {
          background-color: green;
        }
        .body {
          background-color: lightblue;
        }
      </style>

      <h2 class="header">
        <slot name="title"></slot>
      </h2>

      <div class="meta">
        <slot name="meta"></slot>
      </div>

      <div class="body">
        <slot></slot>
      </div>
    `;
  }
}

// コンポーネントを登録
customElements.define("my-article", MyArticle);

<my-article>
  <span slot="title">タイトル欄のテキスト</span>
  <span slot="meta">メタスロット用のテキスト</span>

  <p>
    スロット属性をつけていないテキスト 1。"body" div 内のデフォルト（名前のない）スロットに配置されます。
  </p>
  <p>
    スロット属性をつけていないテキスト 2。"body" div 内のデフォルト（名前のない）スロットにも同時に配置されます。
  </p>
</my-article>

<p id="support-warning" hidden>
  ⛔ このブラウザーは手動によるスロットの割り当てに対応していません（名前付き割り当てが使用されています）。
</p>

<my-article>
  <span id="text_title">タイトル欄のテキスト</span>
  <span id="text_meta">メタスロット用のテキスト</span>
  <p id="text_body_1">body スロットのテキスト 1</p>
  <p id="text_body_2">body スロットのテキスト 1</p>
</my-article>

class MyArticle extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open", slotAssignment: "manual" });
  }

  connectedCallback() {
    this.render();
    this.assignSlots();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .header {
          background-color: plum;
        }
        .meta {
          background-color: green;
        }
        .body {
          background-color: lightblue;
        }
      </style>

      <h2 class="header">
        <slot id="titleSlot"></slot>
      </h2>

      <div class="meta">
        <slot id="metaSlot"></slot>
      </div>

      <div class="body">
        <slot id="bodySlot"></slot>
      </div>
    `;
  }

  assignSlots() {
    // 1. スロットをターゲットにする
    const titleSlot = this.shadowRoot.querySelector("#titleSlot");
    const metaSlot = this.shadowRoot.querySelector("#metaSlot");
    const bodySlot = this.shadowRoot.querySelector("#bodySlot");

    // 2. 軽量 DOM 要素をターゲットにする
    const titleText = this.querySelector("#text_title");
    const metaText = this.querySelector("#text_meta");
    const body1Text = this.querySelector("#text_body_1");
    const body2Text = this.querySelector("#text_body_2");

    // 3. 手動で割り当てる
    titleSlot.assign(titleText);
    metaSlot.assign(metaText);
    bodySlot.assign(body2Text, body1Text);
  }
}

customElements.define("my-article", MyArticle);

const isSlotAssignmentSupported = Object.hasOwn(
  ShadowRoot.prototype,
  "slotAssignment",
);

document
  .querySelector("p[hidden]")
  .toggleAttribute("hidden", isSlotAssignmentSupported);