From 6ec5ba361774bed3f6c12f2ce2b41d09aeedbc83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Wed, 22 Oct 2025 16:33:56 +0200 Subject: [PATCH 01/10] Add declarative out-of-order streaming --- source | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/source b/source index 2d7effe1d68..9d9bfdda75d 100644 --- a/source +++ b/source @@ -67863,6 +67863,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
Nothing (for clarification, see example).
Content attributes:
Global attributes
+
contentmethod
shadowrootmode
shadowrootdelegatesfocus
shadowrootclonable
@@ -67879,6 +67880,7 @@ interface HTMLTemplateElement : HTMLElement { [HTMLConstructor] constructor(); readonly attribute DocumentFragment content; + [CEReactions] attribute DOMString contentMethod; [CEReactions] attribute DOMString shadowRootMode; [CEReactions, Reflect] attribute boolean shadowRootDelegatesFocus; [CEReactions, Reflect] attribute boolean shadowRootClonable; @@ -67894,6 +67896,40 @@ interface HTMLTemplateElement : HTMLElement {

In a rendering, the template element represents nothing.

+

The contentmethod content attribute is an + enumerated attribute with the following keywords and states:

+ + + + + + + + + +
Keyword + State + Brief description +
replace + Replace + Replace the target element itself. +
replace-children + Replace Children + Replace the children of the target element. +
append + Append + Append after the target element. +
prepend + Prepend + Prepend before the target element. +
+ +

The contentmethod attribute's invalid value default and missing value default are both the None state.

+

The shadowrootmode content attribute is an enumerated attribute with the following keywords and states:

@@ -68075,6 +68111,13 @@ interface HTMLTemplateElement : HTMLElement { not a ShadowRoot node; otherwise null.

+
+

The contentMethod IDL attribute must + reflect the contentmethod content + attribute, limited to only known values.

+
+

The shadowRootMode IDL attribute must @@ -139403,6 +139446,10 @@ dictionary StorageEventInit : EventInit { element:

    + +

  1. Let the adjusted insertion location be the appropriate place for inserting a node.

    2. @@ -140196,6 +140243,10 @@ document.body.appendChild(text);

    If any of the following are false:

      +
    • templateStartTag's contentmethod is not in the None state;
      • +
    • templateStartTag's shadowrootmode is not in the None state;
      • @@ -140208,11 +140259,24 @@ document.body.appendChild(text); open elements,
    -

    then insert an HTML element for the token.

    +

    then insert an HTML element for the token and return.

  2. -

    Otherwise:

    +

    If templateStartTag's contentmethod is not in the None state:

    + +
      +

    1. TODO

      2. +
    +
    3. + +
  3. + +

    If templateStartTag's shadowrootmode is not in the None state:

    1. Let declarativeShadowHostElement be adjusted current @@ -152714,6 +152778,19 @@ interface External { Whether the element is editable "true"; "plaintext-only"; "false" + + contentmethod + template + Enables out-of-order streaming + "replace"; + "replace-children"; + "append"; + "prepend" + + contentname + HTML elements + Unique string to target what contentmethod affects + Text* controls audio; From 50a4491e34e2dccbab2883c37c1cddd4d5ca974d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Wed, 22 Oct 2025 16:58:23 +0200 Subject: [PATCH 02/10] Think out loud with TODOs and questions --- source | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/source b/source index 9d9bfdda75d..09d71f031bd 100644 --- a/source +++ b/source @@ -139449,6 +139449,27 @@ dictionary StorageEventInit : EventInit { +

    2. +

      contentmethod handling:

      + +
        +

      1. If element has a contentname attribute and is being inserted into a template + element with a valid contentmethod attribute, find the target element with the same namespace, + localName, and a contentname attribute with the same value.

        2. + +

      2. TODO: is there any whitespace stripping in contentname attribute values?

        3. + +

      3. If the template element is in body, instead search the whole document so + that things in head can be patched.

        4. + +

      4. Return if the target element wasn't found

        5. + +

      5. Depending on the contentmethod state, remove existing nodes and update the insertion point.

        6. + +

      6. Question: do we adjust the insertion point simply by setting adjusted insertion location, + or is there other bookkeeping that's needed here?

        7. +
      +

    3. Let the adjusted insertion location be the appropriate place for inserting a node.

      4. @@ -140268,7 +140289,9 @@ document.body.appendChild(text); data-x="attr-contentmethod-none-state">None state:

        -

      1. TODO

        2. +

      2. TODO: what to we need to do so that elements are inserted into the template element + and redirected by our pre-insertion steps? We need to undo whatever it is that causes nodes + to be inserted into the DocumentFragment normally.

      From 97d3cfd9addf8b72e7f80257d33068c6856fb7bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Thu, 23 Oct 2025 17:03:39 +0200 Subject: [PATCH 03/10] Flesh things out more --- source | 111 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 83 insertions(+), 28 deletions(-) diff --git a/source b/source index 09d71f031bd..dcd80abde4e 100644 --- a/source +++ b/source @@ -13894,6 +13894,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    4. autocorrect
    5. autofocus
    6. contenteditable
      7. +
    7. contentname
    8. dir
    9. draggable
    10. enterkeyhint
      11. @@ -67930,6 +67931,17 @@ interface HTMLTemplateElement : HTMLElement { default">missing value default are both the None state.

      +

      The contentname + content points to the target for template contentmethod, like an ID attribute.

      + + +

      Should contentname work on only HTML elements, HTML+SVG+MathML, or any element?

      + +

      If specified, the contentname attribute value must equal + the contentname of another element in the same + tree.

      + +

      The shadowrootmode content attribute is an enumerated attribute with the following keywords and states:

      @@ -139294,6 +139306,13 @@ dictionary StorageEventInit : EventInit { parser.

      +
      If target is a template element whose "contentmethod target" is non-null:
      + +
      +

      Let adjusted insertion location be inside target's "contentmethod target", + after its last child (if any).

      +
      +
      Otherwise
      @@ -139305,8 +139324,31 @@ dictionary StorageEventInit : EventInit {

    11. If the adjusted insertion location is inside a template - element, let it instead be inside the template element's template - contents, after its last child (if any).

      + element:

      + +
        +

      1. If target is a template element whose "contentmethod target" is + non-null, let adjusted insertion location be inside target's + "contentmethod target", after its last child (if any).

        2. + +

      2. Otherwise, let adjusted insertion location be inside the + template element's template contents, after its last child (if + any).

        3. +
      + +

      We shouldn't handle contentmethod in both places above. But which is correct? + If we use the first place, should the above "Otherwise" be able to further update the + adjusted insertion location? The test case for this would be something like:

      + + 
      
+    <template contentname="regular-template">
+    <template contentmethod="append">
+     <template contentname="regular-template">
+      <div class="where-does-this-end-up"></div>
+     </template>
+    </template>
      + +

      Also, does "inside" above mean any descendent, or only children?

    12. @@ -139446,40 +139488,54 @@ dictionary StorageEventInit : EventInit { element:

        - +

      1. Let the adjusted insertion location be the appropriate place for + inserting a node.

        2. + +

      2. If it is not possible to insert element at the adjusted insertion + location, abort these steps.

        3. + +

      3. If the parser was not created as part of the HTML fragment parsing + algorithm, then push a new element queue onto element's + relevant agent's custom element reactions stack.

        4. +
      4. -

        contentmethod handling:

        +

        If element's has a contentname attribute + specified and adjusted insertion location is inside a template element whose + contentmethod attribute is not in the None state:

          -

        1. If element has a contentname attribute and is being inserted into a template - element with a valid contentmethod attribute, find the target element with the same namespace, - localName, and a contentname attribute with the same value.

          2. +

        2. Let scope be the template element's parent.

          3. -

        3. TODO: is there any whitespace stripping in contentname attribute values?

          4. +

        4. If scope is a body element, set scope to its + parent.

          5. -

        5. If the template element is in body, instead search the whole document so - that things in head can be patched.

          6. +

        6. Let target be the first element in tree-order within scope with + a contentname attribute exactly matching that of + element.

          7. -

        7. Return if the target element wasn't found

          8. +

        8. If target is null, TODO and return.

          9. -

        9. Depending on the contentmethod state, remove existing nodes and update the insertion point.

          10. +

        10. If target doesn't have the same namespace and localName as element, + TODO and return.

          11. -

        11. Question: do we adjust the insertion point simply by setting adjusted insertion location, - or is there other bookkeeping that's needed here?

          12. -
        -
        5. +
      5. +

        Set the template element's "contentmethod target" to target.

        -

      6. Let the adjusted insertion location be the appropriate place for - inserting a node.

        7. +

        The "contentmethod target" will be used later when nodes are to be inserted + into the child of the template element that has a contentname attribute.

        + -

      7. If it is not possible to insert element at the adjusted insertion - location, abort these steps.

        8. +
      8. +

        Depending on the contentmethod attribute + state, potentially remove target or its children and adjust the + template element's "contentmethod target" and additionally keep track of the + element we should insert before for the "prepend" and "replace" modes.

        -

      9. If the parser was not created as part of the HTML fragment parsing - algorithm, then push a new element queue onto element's - relevant agent's custom element reactions stack.

        10. +

        Should we still insert the element in the following steps? Does it matter?

        + +
      +

    13. Insert element at the adjusted insertion location.

      14. @@ -140290,8 +140346,7 @@ document.body.appendChild(text);

      1. TODO: what to we need to do so that elements are inserted into the template element - and redirected by our pre-insertion steps? We need to undo whatever it is that causes nodes - to be inserted into the DocumentFragment normally.

        2. + and redirected by our pre-insertion steps?

      @@ -152811,7 +152866,7 @@ interface External { "prepend" contentname - HTML elements + HTML elements Unique string to target what contentmethod affects Text* From 8739f8b5c0c21271eebed621f9704a42c9d049dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Mon, 27 Oct 2025 12:11:42 +0100 Subject: [PATCH 04/10] Let shadowrootmode take precedent over contentmethod --- source | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/source b/source index dcd80abde4e..a2990837a18 100644 --- a/source +++ b/source @@ -140322,11 +140322,11 @@ document.body.appendChild(text);
      • templateStartTag's contentmethod is not in the None state;
        • + data-x="attr-contentmethod-none-state">None state; or
      • templateStartTag's shadowrootmode is not in the None state;
        • + data-x="attr-shadowrootmode-none-state">None state; or
      • document's allow declarative shadow @@ -140340,18 +140340,6 @@ document.body.appendChild(text);
      • -

        If templateStartTag's contentmethod is not in the None state:

        - -
          -

        1. TODO: what to we need to do so that elements are inserted into the template element - and redirected by our pre-insertion steps?

          2. -
        -
        • - -
      • -

        If templateStartTag's shadowrootmode is not in the None state:

        @@ -140431,6 +140419,17 @@ document.body.appendChild(text);
    4. + +
  4. +

    Otherwise, if templateStartTag's contentmethod is not in the None state:

    + +
      +

    1. TODO: what to we need to do so that elements are inserted into the template element + and redirected by our pre-insertion steps?

      2. +
    +
From 00872de452efa1451eaeb0e44f736398f79b0204 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Mon, 27 Oct 2025 16:09:59 +0100 Subject: [PATCH 05/10] Add a note about scope's type --- source | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/source b/source index a2990837a18..5b195202a53 100644 --- a/source +++ b/source @@ -139505,7 +139505,12 @@ dictionary StorageEventInit : EventInit { data-x="attr-contentmethod-none-state">None state:

    -

  1. Let scope be the template element's parent.

    2. +
  2. +

    Let scope be the template element's parent.

    + +

    The template element's parent will often be an element, but can + be a DocumentFragment in the fragment case.

    +

  3. If scope is a body element, set scope to its parent.

    4. From d99f3325a3a7ec6cfd7e55fa16078c54165f8ec3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Wed, 29 Oct 2025 22:52:53 +0100 Subject: [PATCH 06/10] Fix incorrect method descriptions --- source | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source b/source index 5b195202a53..6ccfde74582 100644 --- a/source +++ b/source @@ -67915,15 +67915,15 @@ interface HTMLTemplateElement : HTMLElement { replace-children Replace Children - Replace the children of the target element. + Replace the child nodes of the target element. append Append - Append after the target element. + Append child nodes to the target element. prepend Prepend - Prepend before the target element. + Prepend child nodes to the target element.

    The contentmethod attribute's Date: Thu, 6 Nov 2025 11:06:42 +0100 Subject: [PATCH 07/10] Define templat's content target element-or-null slot --- source | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/source b/source index 6ccfde74582..c7ece5e4359 100644 --- a/source +++ b/source @@ -67942,6 +67942,12 @@ interface HTMLTemplateElement : HTMLElement { tree.

    +

    Each template element has an associated content target + which is an element or null, initially null.

    + +

    The content target element is used to adjust the parser's insertion + point based on the contentmethod attribute.

    +

    The shadowrootmode content attribute is an enumerated attribute with the following keywords and states:

    @@ -139306,10 +139312,10 @@ dictionary StorageEventInit : EventInit { parser.

    -
    If target is a template element whose "contentmethod target" is non-null:
    +
    If target is a template element whose content target is non-null:
    -

    Let adjusted insertion location be inside target's "contentmethod target", +

    Let adjusted insertion location be inside target's content target, after its last child (if any).

    @@ -139327,9 +139333,9 @@ dictionary StorageEventInit : EventInit { element:

      -

    1. If target is a template element whose "contentmethod target" is +

    2. If target is a template element whose content target is non-null, let adjusted insertion location be inside target's - "contentmethod target", after its last child (if any).

      3. + content target, after its last child (if any).

    3. Otherwise, let adjusted insertion location be inside the template element's template contents, after its last child (if @@ -139525,16 +139531,16 @@ dictionary StorageEventInit : EventInit { TODO and return.

    4. -

      Set the template element's "contentmethod target" to target.

      +

      Set the template element's content target to target.

      -

      The "contentmethod target" will be used later when nodes are to be inserted +

      The content target will be used later when nodes are to be inserted into the child of the template element that has a contentname attribute.

    5. Depending on the contentmethod attribute state, potentially remove target or its children and adjust the - template element's "contentmethod target" and additionally keep track of the + template element's content target and additionally keep track of the element we should insert before for the "prepend" and "replace" modes.

      Should we still insert the element in the following steps? Does it matter?

      From cec66b6232b04b50a373fa87d086c6c84bfc4923 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Thu, 6 Nov 2025 12:33:23 +0100 Subject: [PATCH 08/10] Flesh out a lot of details (some in the wrong place/order) --- source | 95 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 47 insertions(+), 48 deletions(-) diff --git a/source b/source index c7ece5e4359..9dd82820a01 100644 --- a/source +++ b/source @@ -67932,11 +67932,9 @@ interface HTMLTemplateElement : HTMLElement { data-x="attr-contentmethod-none-state">None state.

      The contentname - content points to the target for template contentmethod, like an ID attribute.

      + attribute value points to the target for template contentmethod, like an ID attribute.

      -

      Should contentname work on only HTML elements, HTML+SVG+MathML, or any element?

      -

      If specified, the contentname attribute value must equal the contentname of another element in the same tree.

      @@ -67945,8 +67943,13 @@ interface HTMLTemplateElement : HTMLElement {

      Each template element has an associated content target which is an element or null, initially null.

      +

      Each template element has an associated content prepend + target which is an element or null, initially null.

      +

      The content target element is used to adjust the parser's insertion - point based on the contentmethod attribute.

      + point based on the contentmethod attribute. + The content prepend target is used only for the + Prepend state.

      The shadowrootmode content attribute is an @@ -139312,13 +139315,6 @@ dictionary StorageEventInit : EventInit { parser.

      -
      If target is a template element whose content target is non-null:
      - -
      -

      Let adjusted insertion location be inside target's content target, - after its last child (if any).

      -
      -
      Otherwise
      @@ -139329,32 +139325,32 @@ dictionary StorageEventInit : EventInit {
    6. -

      If the adjusted insertion location is inside a template - element:

      +

      If adjusted insertion location is inside a template element whose + content target is non-null:

        -

      1. If target is a template element whose content target is - non-null, let adjusted insertion location be inside target's - content target, after its last child (if any).

        2. +

      2. Let target be the template element's content target.

        3. -

      3. Otherwise, let adjusted insertion location be inside the - template element's template contents, after its last child (if - any).

        4. -
      +

    7. Let state be the state the template element's + contentmethod attribute is in.

      8. + +

    8. Assert: state is not None.

      9. -

      We shouldn't handle contentmethod in both places above. But which is correct? - If we use the first place, should the above "Otherwise" be able to further update the - adjusted insertion location? The test case for this would be something like:

      +

    9. If state is Replace, + set adjusted insertion location to inside target's parent element, after + target.

      10. + +

    10. If state is Replace Children, + set adjusted insertion location to inside target.

      11. - 
      
-    <template contentname="regular-template">
-    <template contentmethod="append">
-     <template contentname="regular-template">
-      <div class="where-does-this-end-up"></div>
-     </template>
-    </template>
      +

    11. If state is Append, + set adjusted insertion location to inside target, after its last child + (if any).

      12. -

      Also, does "inside" above mean any descendent, or only children?

      +

    12. If state is Prepend, + set adjusted insertion location to inside target, before the + template element's content prepend target (if any).

      13. +
  4. @@ -139505,14 +139501,18 @@ dictionary StorageEventInit : EventInit { relevant agent's custom element reactions stack.

  5. -

    If element's has a contentname attribute +

    If element has a contentname attribute specified and adjusted insertion location is inside a template element whose contentmethod attribute is not in the None state:

      +

    1. Let template be element's parent.

      2. + +

    2. Assert: template is a template element.

      3. +
    3. -

      Let scope be the template element's parent.

      +

      Let scope be the template's parent.

      The template element's parent will often be an element, but can be a DocumentFragment in the fragment case.

      @@ -139521,31 +139521,30 @@ dictionary StorageEventInit : EventInit {

    4. If scope is a body element, set scope to its parent.

      5. -

    5. Let target be the first element in tree-order within scope with - a contentname attribute exactly matching that of - element.

      6. - -

    6. If target is null, TODO and return.

      7. +

    7. Let target be the first element in tree order within + scope with a contentname attribute + value equal to that of element.

      8. -

    8. If target doesn't have the same namespace and localName as element, - TODO and return.

      9. +

    9. If target is null or if target doesn't have the same local name + and namespace as element, TODO and return.

    10. -

      Set the template element's content target to target.

      +

      Set template's content target to target.

      The content target will be used later when nodes are to be inserted into the child of the template element that has a contentname attribute.

      11. -
    11. -

      Depending on the contentmethod attribute - state, potentially remove target or its children and adjust the - template element's content target and additionally keep track of the - element we should insert before for the "prepend" and "replace" modes.

      +

    12. Let state be the state that template's + contentmethod attribute is in.

      13. -

      Should we still insert the element in the following steps? Does it matter?

      - +

    13. If state is Replace, + remove target from its parent.

      14. + +

    14. If state is Replace Children, + remove target's children from target.

    +

  6. Insert element at the adjusted insertion location.

    7. From ff83da1fcfa1e783c67ec26bd41277d84ae98224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Fri, 7 Nov 2025 19:28:39 +0100 Subject: [PATCH 09/10] Rewrite again to handle all known issues --- source | 133 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 81 insertions(+), 52 deletions(-) diff --git a/source b/source index 9dd82820a01..8a234edb7db 100644 --- a/source +++ b/source @@ -67940,15 +67940,15 @@ interface HTMLTemplateElement : HTMLElement { tree.

    -

    Each template element has an associated content target - which is an element or null, initially null.

    +

    Each element has an associated element-or-null content target, which is initially + null.

    -

    Each template element has an associated content prepend - target which is an element or null, initially null.

    +

    Each element has an associated node-or-null content target first child, which is + initially null.

    The content target element is used to adjust the parser's insertion point based on the contentmethod attribute. - The content prepend target is used only for the + The content target first child is used only for the Prepend state.

    The StorageEventInit : EventInit {

  7. -

    If adjusted insertion location is inside a template element whose - content target is non-null:

    +

    If adjusted insertion location is inside an element whose content + target is non-null:

      -

    1. Let target be the template element's content target.

      2. - -

    2. Let state be the state the template element's - contentmethod attribute is in.

      3. - -

    3. Assert: state is not None.

      4. +

    4. Let target be that element's content target.

      5. -

    5. If state is Replace, - set adjusted insertion location to inside target's parent element, after - target.

      6. +

    6. Let target first child be that element's content target first + child.

      7. -

    7. If state is Replace Children, - set adjusted insertion location to inside target.

      8. +
    8. +

      If target first child is a node whose parent is target, set + adjusted insertion location to inside target, before target first + child.

      -

    9. If state is Append, - set adjusted insertion location to inside target, after its last child - (if any).

      10. +

      If target's first child was moved or removed, the element will be + appended to target below. Should the node be dropped instead, or should we update + content target first child and keep inserting before it?

      + -

    10. If state is Prepend, - set adjusted insertion location to inside target, before the - template element's content prepend target (if any).

      11. +

    11. Otherwise, set adjusted insertion location to inside target, after + its last child (if any).

    8. @@ -139502,49 +139498,82 @@ dictionary StorageEventInit : EventInit {

  8. If element has a contentname attribute - specified and adjusted insertion location is inside a template element whose - contentmethod attribute is not in the adjusted insertion location is inside a + template element whose contentmethod attribute is not in the None state:

      -

    1. Let template be element's parent.

      2. - -

    2. Assert: template is a template element.

      3. +

    3. Let template be that template element.

    4. -

      Let scope be the template's parent.

      +

      Let scope be the second-to-bottommost element on the stack of open + elements.

      -

      The template element's parent will often be an element, but can - be a DocumentFragment in the fragment case.

      +

      The bottommost node (the current node) is template and + the node above is what would have been template's parent if it was inserted.

      + +

      In the fragment case, scope can be the root + html element of the temporary document. This makes it possible for contentmethod and contentname to modify already-parsed content in the + fragment.

      5. -

    5. If scope is a body element, set scope to its - parent.

      6. +
    6. +

      If scope is the body element of its node document, + set scope to its parent.

      + +

      This is to support targeting head and body with a + template inside body.

      -

    7. Let target be the first element in tree order within - scope with a contentname attribute - value equal to that of element.

      8. +

      Patching head from within head is not possible + but could easily be supported.

      + -

    8. If target is null or if target doesn't have the same local name - and namespace as element, TODO and return.

      9. +

    9. Let target be the first descendant of scope in + tree order with a contentname attribute + value equal to that of element, or null if there is no such element.

    10. -

      Set template's content target to target.

      +

      If target is an element with the same local name and namespace as + element:

      -

      The content target will be used later when nodes are to be inserted - into the child of the template element that has a contentname attribute.

      -
      11. +
        +

      1. Let state be the state that template's + contentmethod attribute is in.

        2. + +
      2. +

        If state is Replace:

        + +
          +

        1. Set adjusted insertion location to inside target's parent, + after target.

          2. -

        2. Let state be the state that template's - contentmethod attribute is in.

          3. +

        3. Remove target from its parent.

          4. +
        +
        3. -

      3. If state is Replace, - remove target from its parent.

        4. +
      4. +

        Otherwise:

        -

      5. If state is Replace Children, - remove target's children from target.

        6. +
          +

        1. Set element's content target to target.

          2. + +

        2. If state is Replace Children, + remove target's children from target.

          3. + +

        3. If state is Prepend, + set element's content target first child to target's + first child.

          4. +
        + +

        The Append state is + not explicitly handled here, as appending is the default parser behavior.

        + +
      +
    -

  9. Insert element at the adjusted insertion location.

    10. @@ -140436,8 +140465,8 @@ document.body.appendChild(text); data-x="attr-contentmethod-none-state">None state:

      -

    1. TODO: what to we need to do so that elements are inserted into the template element - and redirected by our pre-insertion steps?

      2. +

    2. Insert a foreign element for templateStartTag, with HTML + namespace and true.

From 1d1af08c1faa97a1f169cd7e0780ffccc8470f40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20J=C3=A4genstedt?= Date: Fri, 7 Nov 2025 20:23:06 +0100 Subject: [PATCH 10/10] Add an example --- source | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/source b/source index 8a234edb7db..e6a51869a59 100644 --- a/source +++ b/source @@ -68223,6 +68223,62 @@ interface HTMLTemplateElement : HTMLElement {
+
+ +

In this example, a template element with a contentmethod attribute is used to stream a docuemnt + out-of-order, sending fast static content first and recommendations computed async as they become + available on the server.

+ + 
<!DOCTYPE html>
+<html lang="en">
+ <head>
+  <title>Async recommendation engine</title>
+  <style>
+   aside {
+    /* position the aside where it can grow without causing layout shift or obscuring other content */
+   }
+   aside.wireframe {
+    /* style the wireframe content */
+   }
+  </style>
+ </head>
+ <body>
+  <h1>How to train your cat</h1>
+  <p>Set realistic goals and don't expect your cat to make a perfect cup of tea
+  on the first try.</p>
+  <aside contentname="recommended" class="wireframe">
+    <p>Recommended reading:</p>
+    <ul>
+      <li>...</li>
+      <li>...</li>
+      <li>...</li>
+    </ul>
+  </aside>
+  <p>...</p>
+  <p>Now sit back and enjoy your tea with your cat.</p>
+
+  <!-- The server has a potentially long delay at this point. -->
+
+  <template contentmethod="replace">
+   <aside contentname="recommended">
+    <p>Recommended reading:</p>
+    <ul>
+      <li>Cat or butler, which is right for you?</li>
+      <li>Rewarding good cat behavior</li>
+      <li>Kettles considered harmful</li>
+    </ul>
+   </aside>
+  </template>
+ </body>
+</html>
+ +

The aside element inside the template replaces the original + aside, and since class="wireframe" is not repeated, + the initial wireframe styling is removed when the final content is loaded.

+
+ +