name

slot 要素 (HTML)

[110] slot 要素は、 スロットを表します。スロットは、影木中にあって、光木中の節点が (仮想的に) 挿入されるべき位置を表します。

目次

  1. 仕様書
  2. 意味
  3. 構文
  4. 属性
  5. 内容
  6. 文脈
  7. 状態
  8. HTMLSlotElement インターフェイス
  9. slot 要素 name 属性
  10. スロット可能
  11. 探す
  12. 割り当てる
  13. 歴史
    1. XBL1
    2. XBL2 content 要素
    3. データ雛形
    4. Web Components
    5. DOM Standard との統合

仕様書#

意味#

[118] slot 要素は、 割り当て済み節点群があればそれを、なければ内容表現します >>109

[13] slot 要素は、スロットです >>11。 他にスロットを作る方法はありません >>11

[12] slot 要素は、普通影木で使います >>109影木は、スロットをいくつか持つことがあります >>11

[4] 既定スロット (default slot) は、 影木中、名前空文字列スロットのうち木順で最初のものです >>11

[111] slot 要素は、次の通り分類されています >>109

構文#

[114] 開始タグ終了タグも必須です >>109

属性#

[115] 次の内容属性を指定できます。

内容#

[113] slot 要素は、透過内容を持ちます >>109

文脈#

[112] slot 要素は、語句内容が使える場所に置くことができます >>109

[143] 影木以外で使っても意味がありません。影木以外に置くことも禁止はされていませんし、 影木以外のスクリプトの独自の処理に流用することもできなくはありませんが、 あまり適切ではなさそうです。影木雛形内容以外の slot 要素のは何らかの誤りかもしれません。

状態#

[14] スロットは、次の状態を持ちます。

名前 (name)
既定値は、空文字列です。 >>11 name 属性値となります。
割り当て済み節点群 (assigned nodes)
スロット可能リストです。既定値は、空です。 >>11

[15] 属性変更手順群は、次のようなものです >>11

  1. [16] 次の条件のすべてを満たす場合:
    1. [20] null空文字列なら、
      1. [21] 要素名前を、空文字列に設定します。
    2. [22] それ以外なら、
      1. [23] 要素名前を、に設定します。
    3. [24] 要素について、木のスロット可能群を割り当てします。

[91] つまり影木スロットすべてについて割り当てを再度やり直します。 本要素への変更で他の要素と同じ名前になる可能性があるためと思われます。

HTMLSlotElement インターフェイス#

[116] slot 要素要素インターフェイスは、 HTMLSlotElement です >>109

[117] HTMLSlotElement インターフェイスは、 HTMLElement インターフェイス継承する >>109 と共に、 次のメンバーを持ちます。

slot 要素 name 属性#

[119] slot 要素name 内容属性は、スロット名前を表します >>109

[120] 属性値は、任意の文字列です >>109著者の都合により好きに値を決めることができます。

[121] 省略は、空文字列と等価です。空文字列は、既定のスロットを表します。

[122] 同名のスロットが複数含まれることは禁止されていませんが、 木順で最初のスロットしか機能しなくなるので、意味がありません。

[123] HTMLSlotElement インターフェイスname IDL属性は、 CEReactions が適用され、 name 内容属性反映しなければなりません >>109

スロット可能#

[26] スロット可能 (slotable) は、 ElementText です >>25。 両インターフェイスは、 Slotable実装します >>105

[27] スロットスロット可能です >>25

[41] スロットスロット可能も共に同名の「名前」 を持ちますが、両者は別の内部状態と思われます。

[28] スロット可能は、次の状態を持ちます。

名前 (name)
既定値は、空文字列です。 >>25 要素では slot 属性値となります。 テキスト節点では常に空文字列となります。
割り当て済みスロット (assigned slot)
スロットまたは null既定値null です。 >>25 イベント経路の決定で親の取得から参照されます。
割り当て済み (assigned)
割り当て済みスロットnull でないことをいいます >>25

[148] 割り当て済みスロットイベント経路の決定に使われるので、 割り当てられた節点発火されたイベントは、スロットへと伝播します。

[106] Slotable は、 NoInterfaceObject で、文書環境にのみ晒されます >>105。 次のメンバーを持ちます。

[132] slot 内容属性は、超大域属性です。

[133] slot 内容属性は、すべてのHTML要素に指定できます >>131。特別な制限はなく >>131、任意の属性値を指定できます。

[144] slot 属性値は、 当該要素影木内のスロット (slot 要素) に割り振られるときに、どのスロットが選ばれるべきかを指定するものです。 ですから、いずれかのスロットに割り当てられるべき時は、 そのスロット名とする必要があります。 無視するべき時は、存在しないスロット名を指定できます。

[145] slot 内容属性はどの要素にも指定できますが、 実用上は attachShadow できる要素子要素でしか意味を持ちません。

[135] Element インターフェイスslot IDL属性は、 CEReactionsUnscopeable が適用され、 slot 内容属性反映しなければなりません >>134

[29] 属性変更手順群は、次のようなものです >>25

  1. [30] 次の条件のすべてを満たす場合:
    1. [33] null空文字列なら、
      1. [34] 要素名前を、空文字列に設定します。
    2. [35] それ以外なら、
      1. [36] 要素名前を、に設定します。
    3. [37] 要素割り当て済みなら、
      1. [38] 要素割り当て済みスロットについて、スロット可能の割り当てをします。
    4. [40] 要素についてスロットの割り当てをします。

[92] スロットの名前が変更された場合とは違って、 他のスロットの割り当て再実行は発生しません。

探す#

[43] スロット可能開きフラグ (既定値は未設定) についてスロットを探す (find a slot) には、次のようにします >>42

  1. [44] 次のいずれかを満たすなら:
    1. [48] null を返します。
  2. [53] それ以外なら、
    1. [54] スロット可能影根の、 名前スロット可能名前である最初のスロットを返します。

[107] Slotable インターフェイスassignedSlot IDL属性取得器は、 次のようにしなければなりません >>105

  1. [108] スロットを探すを実行した結果を返します。
    スロット可能
    文脈オブジェクト
    開きフラグ
    設定する

[49] スロットについてスロット可能群を探す (find slotables) には、 次のようにします >>42

  1. [50] 結果を、空のリストに設定します。
  2. [51] スロット影根なら、
    1. [57] スロットホスト子供スロット可能スロット可能について、木順に、
      1. [59] 見つかったスロットを、スロット可能についてスロットを探すを実行した結果に設定します。
      2. [60] 見つかったスロットスロットなら、
        1. [61] 結果の末尾に見つかったスロットを追加します。
  3. [62] 結果を返します。

[52] これはつまり、

[56] スロットについて平坦化されたスロット可能群を探す (find flattened slotables) には、次のようにします >>42

  1. [58] 結果を、空のリストに設定します。
  2. [99] スロット影根の場合、
    1. [63] スロット可能群を、スロットについてスロット可能群を探すを実行した結果に設定します。
    2. [64] スロット可能群が空なら、
      1. [65] スロット可能群スロット子供スロット可能木順で追加します。
    3. [66] スロット可能群の各節点について順に、
      1. [67] 節点スロットで、節点影根の場合、
        1. [68] 結果の末尾に節点について平坦化されたスロット可能群を探すを実行した結果に含まれるものを追加します。
      2. [69] それ以外なら、
        1. [70] 結果の末尾に節点を追加します。
  3. [71] 結果を返します。

[72] つまりスロット可能群を探す処理を更に拡張したもので、 最終結果にスロットがなくなるまで再帰的に処理すると共に、 スロット可能が見つからない時にはスロット子供をかわりに利用します。

[124] HTMLSlotElement インターフェイスassignedNodes メソッドは、 次のようにしなければなりません >>109

  1. [125] オプション群を、第1引数を省略可能な AssignedNodeOptions として解釈した結果に設定します。
  2. [126] オプション群flattenなら、
    1. [129] 文脈オブジェクトについて平坦化されたスロット可能群を探すを実行した結果を返します。
  3. [127] それ以外なら、
    1. [128] 文脈オブジェクト割り当て済み節点群を返します。

[130] 辞書 AssignedNodeOptions >>109 は、 次のメンバーを持ちます。

割り当てる#

[74] スロットについてスロット可能群を割り当て (assign slotables) するには、 次のようにします >>73

  1. [75] スロット可能群を、スロットについてスロット可能群を探すを実行した結果に設定します。
  2. [76] スロット可能群スロット割り当て済み節点群が異なるなら、
    1. [77] スロットについてスロット変更を信号します。
    2. [78] スロット割り当て済み節点群を、スロット可能群に設定します。
  3. [79] スロット可能群の各スロット可能について、
    1. [80] スロット可能割り当て済みスロットを、スロットに設定します。

[90] 属性変更手順群 (>>29) と削除から呼び出されます。 >>81 および >>84 からも呼び出されます。

[81] に関する木についてスロット可能群の割り当て (assign slotables for a tree) は、 次のようにします >>73

  1. [82] の各スロットスロットについて、木順に、
    1. [83] スロットについて、スロット可能群の割り当てを実行します。

[89] 属性変更手順群 (>>15) の他、挿入削除から呼び出されます。

[84] スロット可能についてスロットの割り当て (assign a slot) は、 次のようにします >>73

  1. [85] スロットを、スロット可能についてスロットを探すを実行した結果に設定します。
  2. [86] スロットnull でなければ、
    1. [87] スロットについてスロット可能群の割り当てを実行します。

[88] 属性変更手順群 (>>29) の他、挿入から呼び出されることもあります。

[93] 関連する類似起源閲覧文脈群の単位は、 信号スロットリスト (signal slot list) を持ちます。 初期値は空です。 >>39

[104] このリストは、変異観察器で種別 slotchange の通知のために使われます。

[94] スロットスロット変更を信号 (signal a slot change) するには、 次のようにします >>39

  1. [95] スロット関連する類似起源閲覧文脈群の単位信号スロットリストになければ、
    1. [96] 関連する類似起源閲覧文脈群の単位信号スロットリストの末尾にスロットを追加します。
  2. [102] 変異観察器複合マルチタスクをキューに追加します。

[103] >>74 の他、挿入削除から呼び出されます。

[159] GlobalEventHandlersShadowRootonslotchange IDL属性は、 slotchange イベントイベントハンドラーIDL属性です。 HTML Standard, DOM Standard

歴史#

XBL1#

XBL2 content 要素#

[178] XBL 2.0, , https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html#content

[179] HTML要素概説
要素名
content
日付
説明
XBL 2.0content が定義された。 歴史的には XBL 2.0 (XML 版) content, XBL 1.0 children に遡る。
出典

データ雛形#

[142] HTMLデータ雛形には nest 要素がありました。 (しかしその性質は slot 要素とは少し違ったもので、 どちらかといえば XSLTapply-templates 要素の方が近いかもしれません。)

Web Components#

[168] Web ComponentsShadow DOM は当初 content 要素を定義していました。

[174] 前史は Web Components も参照。

[176] HTML要素概説
要素名
content
日付
説明
Component Modelcontent が追加された。
出典

[169] からにかけて、 contentslot に改称されました。

[177] HTML要素概説
要素名
content
要素名
slot
日付
説明
Shadow DOMcontent は削除され slot が追加された。
出典

[170] What's New in Shadow DOM v1 (by examples) — hayato.io, , https://web.archive.org/web/20160606233908/http://hayato.io/2016/shadowdomv1/

DOM Standard との統合#

[1] Shadow: define slots and slotables · whatwg/dom@a2b04df ( 版) https://github.com/whatwg/dom/commit/a2b04df51b4342d7617c128e80e5aa892889d2e0

[2] Shadow: define assignedSlot of Element and Text · whatwg/dom@b8e1ccf ( 版) https://github.com/whatwg/dom/commit/b8e1ccf857b6ac483f708336dff4b7ee48393191

[3] Shadow: define superglobal slot content attribute · whatwg/dom@e3d8291 ( 版) https://github.com/whatwg/dom/commit/e3d82914676ad1e1bf590e1042636e60feddb6ae

[5] Editorial: mention that step="" conformance requirements are out of s… · whatwg/dom@e996bdc ( 版) https://github.com/whatwg/dom/commit/e996bdc52ef951113d2a6edc43828ec2dba23e83

[6] The DOM Standard defines the class, id, and slot attributes · whatwg/html@36c9938 ( 版) https://github.com/whatwg/html/commit/36c9938b102fecadf6029a248f40aae83ea099d2

[7] Shadow: define slotchange event · whatwg/dom@81566a3 ( 版) https://github.com/whatwg/dom/commit/81566a31a393d6fc07332f92a2a5d551dc7c96bd

[8] Editorial: distributed -> flattened · whatwg/dom@e35b570 ( 版) https://github.com/whatwg/dom/commit/e35b5706252b99f69a836e82e6ae9ebc76cdb2c7

[9] Editorial: add "shadow host" and "assigned" as terms · whatwg/dom@8ae8749 ( 版) https://github.com/whatwg/dom/commit/8ae87496beb249925a3a72cf62aee9987e3620eb

[10] Shadow: <slot> is now defined in HTML · whatwg/dom@fdad8cb ( 版) https://github.com/whatwg/dom/commit/fdad8cb90a78b399cd2bdf5a20c1960649697462

[141] Add a new <slot> element for shadow trees · whatwg/html@3c15737 ( 版) https://github.com/whatwg/html/commit/3c157377135d05fbdd74f8c69199b47408bc6a9a

[147] Shadow: define event retargeting for shadow trees (annevk著, ) https://github.com/whatwg/dom/commit/ed94c9f2f1850b2e6a9b357c6870186859da4c2d

[177] HTML要素概説
要素名
slot
日付
説明
HTML Standardslot が追加された。 現行仕様である。
出典

[146] Do not let mutation observer callbacks influence the used signal slot… ( (annevk著, )) https://github.com/whatwg/dom/commit/d4ca21707fe3eb5d60dd1de0111752504b3da185

[149] Mark Element's slot IDL attribute [Unscopable] (hayatoito著, ) https://github.com/whatwg/dom/commit/bf1c902437408d1b681bdfbf696afbc5d1e038de

[150] Shadow: stop re-signaling a slotchange event (hayatoito著, ) https://github.com/whatwg/dom/commit/89a849a54f123b3409be4bf371735fd0f901ef20

[97] Clarify the purpose of the slot attribute (sideshowbarker著, ) https://github.com/whatwg/html/commit/67536b2730a4c75edd9ff0ba453ce32e2cf0b815

[98] Make slots do nothing outside shadow trees (hayatoito著, ) https://github.com/whatwg/dom/commit/8f8c1c30c39be38480336e7fc39c1cc7b40b6a83

[100] Shadow: Specify when `slotchange` fires · Issue #447 · whatwg/dom () https://github.com/whatwg/dom/issues/447

[101] Don't let a slot do anything special if it isn't in a shadow tree by hayatoito · Pull Request #459 · whatwg/dom () https://github.com/whatwg/dom/pull/459

[151] Make <slot>'s UA style, "display: contents", be !important · Issue #3143 · whatwg/html () https://github.com/whatwg/html/issues/3143

[152] Use interface mixins in IDL (romandev著, ) https://github.com/whatwg/dom/commit/12b069802b771c145fd3b1917c5b82f2a8c1ff9f

[153] Add <slot>.assignedElements() (cyrilletuzi著, ) https://github.com/whatwg/html/commit/b626a63647972cf70bcf1b58a1daf1347b2d3435

[154] A node doesn't have an associated tree (annevk著, ) https://github.com/whatwg/dom/commit/06dae6577f55af9ef2ff8228ac1a8a60b9f68cb3

[155] "node's tree" seems to be an undefined concept · Issue #526 · whatwg/dom () https://github.com/whatwg/dom/issues/526

[156] A node doesn't have an associated tree by annevk · Pull Request #599 · whatwg/dom () https://github.com/whatwg/dom/pull/599

[157] Add onslotchange to GlobalEventHandlers (annevk著, ) https://github.com/whatwg/html/commit/a387c7b8986bbac6f5acf1999cac075e76fe577e

[158] Define the onslotchange event handler IDL attribute (domenic著, ) https://github.com/whatwg/dom/commit/a6c6d984e756ad099624350f62c97ab902956cce

[160] Add onslotchange · Issue #3487 · whatwg/html () https://github.com/whatwg/html/issues/3487

[161] Add onslotchange by annevk · Pull Request #4129 · whatwg/html () https://github.com/whatwg/html/pull/4129

[162] Define the onslotchange event handler IDL attribute (domenic著, ) https://github.com/whatwg/dom/commit/a6c6d984e756ad099624350f62c97ab902956cce

[163] Add onabort definition and add onslotchange by domenic · Pull Request #785 · whatwg/dom () https://github.com/whatwg/dom/pull/785

[164] Dispatching slotchange within a compound microtask · Issue #734 · whatwg/dom () https://github.com/whatwg/dom/issues/734