cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順)
WEBページ作成
広告
<slot> 「スロット」[読み方：スロット]
<slot>タグは、通常シャドウツリーで使用され、置き換え可能なプレースホルダーです。
name属性を指定した場合、slot属性に同じ値を指定されたタグによって、置き換えられます。
slot属性に同じ値を指定されたタグが存在しない場合や、対応していない環境の場合、<slot>タグに指定した代替コンテンツが表示されます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<slot>は、HTML5以降に追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<slot> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ | フレージングコンテンツを子要素にもてる場所 | トランスペアレント | 不可 |
<slot>の属性
【構文】
<slot name="スロット名">代替テキスト
</slot>
<slot>のサンプル
<template id="dog">
<div>犬種：<slot name="kind">種類</slot></div>
<div>特徴：<slot name="character">キャラ</slot></div>
<div>備考：<slot name="any">特になし</slot></div>
<hr>
</template>
<script>
class MyTitle extends HTMLElement {
constructor() {
super();
const template = document.getElementById('dog');
const title = template.content.cloneNode(true);
const shadowRoot = this.attachShadow({mode: "closed"});
shadowRoot.appendChild(title);
}
}
customElements.define('my-title', MyTitle);
</script>
<my-title>
<span slot="kind">ミニチュアダックスフンド</span>
<span slot="character">狩猟犬として活躍していたダックスを小型化した犬種</span>
</my-title>
<my-title>
<span slot="kind">チワワ</span>
<span slot="character">世界最小の犬で、大きな瞳、立ち耳が特徴</span>
</my-title>
<my-title>
<span slot="kind">芝犬</span>
<span slot="character">猟犬や番犬として活躍してきた犬種</span>
<span slot="any">日本犬で特に人気です</span>
</my-title>
<div>犬種：<slot name="kind">種類</slot></div>
<div>特徴：<slot name="character">キャラ</slot></div>
<div>備考：<slot name="any">特になし</slot></div>
<hr>
</template>
<script>
class MyTitle extends HTMLElement {
constructor() {
super();
const template = document.getElementById('dog');
const title = template.content.cloneNode(true);
const shadowRoot = this.attachShadow({mode: "closed"});
shadowRoot.appendChild(title);
}
}
customElements.define('my-title', MyTitle);
</script>
<my-title>
<span slot="kind">ミニチュアダックスフンド</span>
<span slot="character">狩猟犬として活躍していたダックスを小型化した犬種</span>
</my-title>
<my-title>
<span slot="kind">チワワ</span>
<span slot="character">世界最小の犬で、大きな瞳、立ち耳が特徴</span>
</my-title>
<my-title>
<span slot="kind">芝犬</span>
<span slot="character">猟犬や番犬として活躍してきた犬種</span>
<span slot="any">日本犬で特に人気です</span>
</my-title>
犬種：種類
特徴：キャラ
備考：特になし
留意事項
- <slot>タグは、基本的には、<template>タグと組み合わせて使用します。ひとつのレイアウトに、複数パターン表示する場合に便利なタグです。
広告