name

slot 要素 (HTML)

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

仕様書

意味

[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) は、 Element と Text です >>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属性は、 CEReactions と Unscopeable が適用され、 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] GlobalEventHandlers と ShadowRoot の onslotchange 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.0 で content が定義された。 歴史的には XBL 2.0 (XML 版) content, XBL 1.0 children に遡る。
出典

データ雛形

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

Web Components

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

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

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

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

[177] HTML要素概説
要素名
content
要素名
slot
日付
説明
、 Shadow DOM の content は削除され 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 Standard に slot が追加された。 現行仕様である。
出典

[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