slot要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Flow content
• Phrasing content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• Transparent。代替コンテンツとなる。

• main要素の規定による制限
  • main要素を子孫に含んではならない。

属性

• グローバル属性
• name→当該slotの名前文字列。

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• すべてのrole及びすべてのaria-*属性は指定不可。

視覚系ブラウザのデフォルトとして期待されるCSS

  slot {
    display: contents;
  }
  

意味・用法

DOMのshadow treeにおいて用いられるslotを定義する。

アクセシビリティ関連

• 定型的なデータをとりあえず表示しておいて、スクリプトでテンプレートを適用して整形するというのが主な用法になるだろうが、アクセシビリティの観点からはテンプレート適用前の表示状態でも支障なく意味がとれるようにしておく方が望ましい。

私見・補足

DOMのshadow treeの仕組みで、name属性をもつslot要素が、当該name属性値と同じ値をもつslot属性が指定された要素に置き換わって、レンダリングされる。

name属性のないslot要素も、DOMのshadow treeの仕組みで、所定の置き換えが起きる。

対応してないユーザーエージェントでは、代替コンテンツとして、その内容が表示される。

template要素内にテンプレートとして配置される用例が多いので、slot要素の内容が代替コンテンツとなるということがほとんど無意味な場合も多い。

表示確認

ソース

  <template id="tem">
    姓：<slot name="fname"></slot>｜名：<slot name="sname"></slot>
  </template>

  <div class="rekkyo">
    <span slot="fname">あああ</span><span slot="sname">いいい</span>
  </div>
  <div class="rekkyo">
    <span slot="fname">AAA</span><span slot="sname">bbb</span>
  </div>

  <script>
    var host = document.getElementsByClassName("rekkyo") ;
    for (i = 0, len = host.length; i < len; i++) {
      var temcontent = document.getElementById("tem").content.cloneNode(true) ;
      var root = host[i].attachShadow({mode: "open"}) ;
      root.appendChild(temcontent) ;
    }
  </script>
  

表示結果

あああいいい

AAAbbb