メニューを表示

slot 要素shadow ツリーとして埋め込む

DOM における Shadow ツリーによって、name 属性をもつ slot 要素が、その name 属性値と同じ値をもつ slot 属性が指定された要素によって置き換えてレンダリングされます。

template 要素と組み合わせることで、より柔軟にテンプレートを使用することができます。

なお、Web Components に対応してないユーザーエージェントにおいては、代替コンテンツとして、slot 要素の内容が表示されます。

サンプルソースを見る

slot 要素の仕様

カテゴリ
コンテンツモデル

透過的

この要素を使用できる文脈
  • フレージングコンテンツが期待される場所。
この要素で使用できる属性

※ slot 要素における name 属性は Shadow ツリースロットの名前を定義します。

DOM インタフェース
interface HTMLSlotElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  sequence assignedNodes(optional AssignedNodesOptions options = {});
  sequence assignedElements(optional AssignedNodesOptions options = {});
};

dictionary AssignedNodesOptions {
  boolean flatten = false;
};

slot 要素のサンプルソース

<template id="sample-template">
  <style>
    h1 {
      font-size: 1.5rem;
      margin: 1em 0;
      padding-bottom: .5em;
      border-bottom: 1px solid #eee;
    }
    .contents {
      font-size: 1rem;
    }
  </style>
  <h1><slot name="sample-contents-01">タイトル</slot></h1>
  <div class="contents">
    <slot name="sample-contents-02"><p>コンテンツ</p></slot>
  </div>
</template>

<div id="sample">
  <span slot="sample-contents-01">持ち物リスト</span>
  <ul slot="sample-contents-02">
    <li>筆記用具</li>
    <li>身分証用の写真</li>
  </ul>
</div>

<script>
  var templete = document.getElementById('sample-template').content.cloneNode(true);
  var host = document.getElementById('sample');
  var root = host.attachShadow({mode: 'open'});
  root.appendChild(templete);
</script>

W3C HTML5 仕様書

4.12.4 The slot element

このページの上部へ