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

仕様書

意味

[118] slot 要素は、 割り当て済み節点群があればそれを、なければ内容を表現表現 (DOM)します >>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<slot name> 属性値となります。
割り当て済み節点群assigned nodes
スロット可能のリストです。既定値は、空です。 >>11

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

  1. [16] 次の条件のすべてを満たす場合:
    • [18] 要素が slot
    • [17] 局所名が name<slot name> で名前空間が null
    • [19] 次のいずれかではない:
      • 値が古い値と等しい
      • 値が null で古い値が空文字列
      • 値が空文字列で古い値が null
    1. [20] 値が null や空文字列なら、
      1. [21] 要素の名前スロット名を、空文字列に設定します。
    2. [22] それ以外なら、
      1. [23] 要素の名前スロット名を、値に設定します。
    3. [24] 要素の木について、木のスロット可能群を割り当てします。

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

HTMLSlotElement インターフェイス

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

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

slot 要素 name<slot name> 属性

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

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

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

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

[123] HTMLSlotElement インターフェイスの name<slot name> IDL属性は、 CEReactions が適用され、 name<slot 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] 次の条件のすべてを満たす場合:
    • [31] 局所名が slot で名前空間が null
    • [32] 次のいずれかではない:
      • 値が古い値と等しい
      • 値が null で古い値が空文字列
      • 値が空文字列で古い値が null
    1. [33] 値が null や空文字列なら、
      1. [34] 要素の名前スロット名を、空文字列に設定します。
    2. [35] それ以外なら、
      1. [36] 要素の名前スロット名を、値に設定します。
    3. [37] 要素が割り当て済み割り当て済みスロットなら、
      1. [38] 要素の割り当て済みスロットについて、スロット可能の割り当てをします。
    4. [40] 要素についてスロットの割り当てをします。

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

探す

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

  1. [44] 次のいずれかを満たすなら:
    • [55] スロット可能の親parentNodeが null
    • [45] スロット可能の親parentNodeの影根が null
    • [46] 開きフラグが設定されていて、 スロット可能の親parentNodeの影根のモード影根が open 以外
    • [47] スロット可能の親parentNodeの影根の木に、 名前スロット名がスロット可能の名前スロット名であるスロットがない
    1. [48] null を返します。
  2. [53] それ以外なら、
    1. [54] スロット可能の親parentNodeの影根の木の、 名前スロット名がスロット可能の名前スロット名である最初のスロットを返します。

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

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

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

  1. [50] 結果を、空のリストに設定します。
  2. [51] スロットの根が影根なら、
    1. [57] スロットの根のホストホスト (DOM)の子供のスロット可能スロット可能について、木順に、
      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] オプション群の flattenAssignedNodeOptions が真なら、
    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) と削除削除 (DOM)から呼び出されます。 >>81 および >>84 からも呼び出されます。

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

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

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

[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 の他、挿入や削除削除 (DOM)から呼び出されます。

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

歴史

XBL1

XBL2 content 要素

  • [136] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-content-element
  • [137] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#processing-content-elements
  • [138] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-xblcontentelement-interface
  • [139] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#the-content
  • [140] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#processing0

[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 に遡る。
出典
  • XBL 2.0, , Ian Hickson, , , https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html

データ雛形

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

Web Components

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

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

[176] HTML要素概説
要素名
content
日付
説明
、 Component Model に content が追加された。
出典
  • CMContentRendering: "<content> element" and "Rendering" stubs, some minor touch-up., , , https://github.com/dglazkov/component-model/commit/186208205004ba32b84e10595363c831eda517a7

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

[177] HTML要素概説
要素名
content
要素名
slot
日付
説明
、 Shadow DOM の content は削除され slot が追加された。
出典
  • 28561 – [Shadow]: rename <content> to <slot>, , https://www.w3.org/Bugs/Public/show_bug.cgi?id=28561

[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 が追加された。 現行仕様である。
出典
  • DOMSlot: Add a new <slot> element for shadow trees, , , https://github.com/whatwg/html/commit/3c157377135d05fbdd74f8c69199b47408bc6a9a

[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