“slot”属性｜グローバル属性｜“HTML－havin' a coffee break

＃

“slot”属性について

“slot”属性は要素に割り当てるシャドウDOMのスロットを指定する属性です。

要素がシャドウDOMが追加されてシャドウホストとなる要素の子要素である場合に“slot”属性の値と同じ値の“name”属性が指定された“slot”要素に挿入することができます。

要素がシャドウDOMが追加されてシャドウホストとなる要素の子要素であり、“slot”属性が指定されていない場合はシャドウDOMの中で“name”属性が指定されていない最初の“slot”要素に挿入されます。

同じスロットに複数の要素が割り当てられた場合には該当する要素がすべて順番に挿入されます。

＃

指定できる値

属性値	説明
スロット名	要素を割り当てる“slot”要素の“name”属性の値

＃

サンプルコード



class SampleElement extends HTMLElement {


  constructor() {


    super();

    this.attachShadow({ mode: "open" });

    this.shadowRoot.innerHTML = `


      <style>

        ul {


            width: calc(100% - 50px);

            margin: 20px auto;

            padding: 10px 10px 10px 25pxpx;

            border-radius: 10px;

            font-size: 1.5em;

            font-weight: bold;

            color: #2b2b2b;

            background:

						
																linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%),

            										linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%);

						
            background-size: 30px 30px;

            background-position: 0 0, 15px 15px;


        }

      </style>

      <ul>


        <slot name="samplecontent">テキストが入ります</slot>


      </ul>


    `;


  }


}


customElements.define("sample-element", SampleElement);

グローバル属性~“slot”属性

“slot”属性について

指定できる値

サンプルコード