目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
視覚系ブラウザデフォルトとして期待されるCSS

  slot {display: contents;}
  
意味・用法

DOMshadow treeにおいて用いられるslotを定義する。

アクセシビリティ関連

私見・補足

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

name属性のないslot要素も、DOMshadow 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
IE6表示のスクリーンショット
IE6表示:置き換えが起きてない

IE7からIE11も同様。