【slotタグ】shadowDOMのスロットを指定してみよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<slot>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ、フレージングコンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フレージングコンテンツを許容する任意の親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
<slot>の説明
<slot>とは
shadowDOMにおけるスロットや、可変値を挿入するためのプレースホルダーを定義するためのタグです。
主に<template>タグと組み合わせて記述するもので、<slot>要素に指定されたname属性値が、呼び出し側の要素のslot属性とリンクして書き換えを可能にする仕組みになっています。
上記のように<slot>要素には name属性で名前を与えることができます。 またslot属性は要素に割り当てるshadowDOMのスロットを指定する属性になります。
DOMとは
DOM（Document Object Model）は、HTML文書やXML文書をツリー構造モデルのオブジェクトで表現することで、ドキュメントをプログラムから操作、利用することを可能にした仕組みのことを言います。
■使用目的
<slot>タグは、webコンポーネントを使ってDOMのツリー構造を構築した際、プレースホルダ―となる場所を提供する場合に使用します。
基本的には<template>タグと併用して使用します。
webコンポーネントに対応していないブラウザでは、<slot>タグに囲まれた内容が代替コンテンツとして扱われます。
webコンポーネントとは
webアプリなどに使用するためのカスタム要素となる部品を作成し、その部品（コード）を複製で再利用可能にするためカプセル化（独立）する機能の総称です。
■使える属性
・name
使用上の注意点
① この要素は段落ちよりも有用ではありません。
内容モデル
<slot>要素の内容モデルは「transparent」です。
<slot>要素はプレースホルダ―で、その内容は何かに置き換えられることを想定していますが、あえて内容を入れておくと、その内容を置き換えられない場合の初期値として利用することができます。
アクセシビリティでの注意点
前述した通り、テンプレート適用前の表示状態でも内容がわかるように、初期値に意味がわかるような内容を入れておくことを推奨します。
まとめ
この記事では、<slot>タグの解説を致しました。
<slot>タグを用いることで、コンポーネントに好きな表示内容を埋め込むことができます。
コンポーネントにはプレースホルダーだけ用意しておき、外からテキストなどをDOMで設定したいときなどに使用すると良いでしょう。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん💡
