From 9f11c451d7dbd08604730c986a738d42609b679f Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Sun, 12 Apr 2026 10:35:31 +0100
Subject: [PATCH 1/5] Add shadowrootslotassignment attribute

---
 .../web/api/htmltemplateelement/index.md      |  2 ++
 .../shadowrootslotassignment/index.md         | 32 +++++++++++++++++++
 .../api/shadowroot/slotassignment/index.md    |  2 ++
 .../html/reference/elements/template/index.md |  8 +++++
 4 files changed, 44 insertions(+)
 create mode 100644 files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md

diff --git a/files/en-us/web/api/htmltemplateelement/index.md b/files/en-us/web/api/htmltemplateelement/index.md
index 632c6178038c3b8..547a889d00dec99 100644
--- a/files/en-us/web/api/htmltemplateelement/index.md
+++ b/files/en-us/web/api/htmltemplateelement/index.md
@@ -32,6 +32,8 @@ _This interface inherits the properties of {{domxref("HTMLElement")}}._
   - : A string that reflects the value of the [`shadowrootcustomelementregistry`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootcustomelementregistry) attribute of the associated `<template>` element, indicating that the declarative shadow root will use a scoped {{domxref("CustomElementRegistry")}}.
 - {{domxref("HTMLTemplateElement.shadowRootSerializable", "shadowRootSerializable")}}
   - : A boolean that reflects the value of the [`shadowrootserializable`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootserializable) attribute of the associated `<template>` element.
+- {{domxref("HTMLTemplateElement.shadowRootSlotAssignment", "shadowRootSlotAssignment")}}
+  - : A string that reflects the value of the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the associated `<template>` element.
 
 ## Instance methods
 
diff --git a/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
new file mode 100644
index 000000000000000..5ac5cf1819c3a62
--- /dev/null
+++ b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootSlotAssignment property"
+short-title: shadowRootSlotAssignment
+slug: Web/API/HTMLTemplateElement/shadowRootSlotAssignment
+page-type: web-api-instance-property
+browser-compat: api.HTMLTemplateElement.shadowRootSlotAssignment
+---
+
+{{APIRef("Web Components")}}
+
+The **`shadowRootSlotAssignment`** property of the {{domxref("HTMLTemplateElement")}} interface reflects the value of the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Reference/Elements/template) element.
+
+Note that this property is not useful for developers.
+If a `<template>` element is used to declaratively create a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), then this object and property do not exist.
+Otherwise, if an `HTMLTemplateElement` is created, the value of this property is irrelevant because the object is not a shadow root and cannot subsequently be changed to a shadow root. It can be used to detect support for the attribute, used declaratively.
+
+## Value
+
+A string that reflects the value of the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Reference/Elements/template) element. Possible values are `"named"` and `"manual"`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the `<template>` element
+- [`ShadowRoot.slotAssignment`](/en-US/docs/Web/API/ShadowRoot/slotAssignment)
diff --git a/files/en-us/web/api/shadowroot/slotassignment/index.md b/files/en-us/web/api/shadowroot/slotassignment/index.md
index eff125ecf3e3c8d..68855b0541ef283 100644
--- a/files/en-us/web/api/shadowroot/slotassignment/index.md
+++ b/files/en-us/web/api/shadowroot/slotassignment/index.md
@@ -55,3 +55,5 @@ function UpdateDisplayTab(elem, tabIdx) {
 
 - {{domxref("Element.attachShadow()")}}
 - {{domxref("HTMLSlotElement.assign()")}}
+- [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the `<template>` element
+- {{domxref("HTMLTemplateElement.shadowRootSlotAssignment")}}
diff --git a/files/en-us/web/html/reference/elements/template/index.md b/files/en-us/web/html/reference/elements/template/index.md
index b3ec56d7429ca07..531c7722ac6381b 100644
--- a/files/en-us/web/html/reference/elements/template/index.md
+++ b/files/en-us/web/html/reference/elements/template/index.md
@@ -51,6 +51,14 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
     If set, the shadow root may be serialized by calling the {{DOMxRef('Element.getHTML()')}} or {{DOMxRef('ShadowRoot.getHTML()')}} methods with the `options.serializableShadowRoots` parameter set `true`.
     The value defaults to `false`.
 
+- `shadowrootslotassignment`
+  - : Sets the [`slotAssignment`](/en-US/docs/Web/API/ShadowRoot/slotAssignment) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element.
+    This is the declarative equivalent of the `slotAssignment` option of the {{domxref("Element.attachShadow()")}} method.
+    - `named`
+      - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root. This is the default value.
+    - `manual`
+      - : Elements are not automatically assigned to {{HTMLElement("slot")}} elements. Instead, they must be manually assigned with {{domxref("HTMLSlotElement.assign()")}}.
+
 ## Usage notes
 
 This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the `<template>` element. The {{domxref("Node.childNodes")}} property of the `<template>` element is always empty, and you can only access said nested content via the special {{domxref("HTMLTemplateElement.content", "content")}} property. However, if you call {{domxref("Node.appendChild()")}} or similar methods on the `<template>` element, then you would be inserting children into the `<template>` element itself, which is a violation of its content model and does not actually update the {{domxref("DocumentFragment")}} returned by the `content` property.

From 06500beefd55e9ecd07681ced38f416c32c9b386 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Mon, 20 Apr 2026 14:13:14 +0100
Subject: [PATCH 2/5] Fix wording

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
---
 .../api/htmltemplateelement/shadowrootslotassignment/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
index 5ac5cf1819c3a62..425c172ef506a38 100644
--- a/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
+++ b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
@@ -12,7 +12,7 @@ The **`shadowRootSlotAssignment`** property of the {{domxref("HTMLTemplateElemen
 
 Note that this property is not useful for developers.
 If a `<template>` element is used to declaratively create a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), then this object and property do not exist.
-Otherwise, if an `HTMLTemplateElement` is created, the value of this property is irrelevant because the object is not a shadow root and cannot subsequently be changed to a shadow root. It can be used to detect support for the attribute, used declaratively.
+Otherwise, if an `HTMLTemplateElement` is created, the value of this property is irrelevant because the object is not a shadow root and cannot subsequently be changed to a shadow root. It can be used to detect support for the declarative attribute.
 
 ## Value
 

From 8c9cb29573667300b7cf12b42b0b1687f22f73f8 Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Tue, 28 Apr 2026 11:39:04 +1000
Subject: [PATCH 3/5] Template slot assignment examples

---
 .../api/shadowroot/slotassignment/index.md    |  17 +-
 .../html/reference/elements/template/index.md | 230 +++++++++++++++++-
 2 files changed, 236 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/api/shadowroot/slotassignment/index.md b/files/en-us/web/api/shadowroot/slotassignment/index.md
index 68855b0541ef283..28ec1d5678948f9 100644
--- a/files/en-us/web/api/shadowroot/slotassignment/index.md
+++ b/files/en-us/web/api/shadowroot/slotassignment/index.md
@@ -8,20 +8,29 @@ browser-compat: api.ShadowRoot.slotAssignment
 
 {{APIRef("Shadow DOM")}}
 
-The read-only **`slotAssignment`** property of the {{domxref("ShadowRoot")}} interface returns the _slot assignment mode_ for the shadow DOM tree. Nodes are either automatically assigned (`named`) or manually assigned (`manual`). The value of this property defined using the `slotAssignment` option when calling {{domxref("Element.attachShadow()")}}.
+The read-only **`slotAssignment`** property of the {{domxref("ShadowRoot")}} interface returns the _slot assignment mode_ for the shadow DOM tree. Nodes are either automatically assigned based on name matching (`named`) or manually assigned (`manual`).
+
+The value of this property is defined using the `slotAssignment` option when calling {{domxref("Element.attachShadow()")}}, or using the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute on {{htmlelement("template")}} when declaratively creating a shadow root.
 
 ## Value
 
 A string that can be one of:
 
 - `named`
-  - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root. Any descendants of the host with a `slot` attribute which matches the `name` attribute of a `<slot>` within this shadow root will be assigned to that slot. Any top-level children of the host with no `slot` attribute will be assigned to a `<slot>` with no `name` attribute (the "default slot") if one is present.
+  - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root.
+    Any descendants of the host with a `slot` attribute which matches the `name` attribute of a `<slot>` within this shadow root will be assigned to that slot.
+    Any top-level children of the host with no `slot` attribute will be assigned to a `<slot>` with no `name` attribute (the "default slot") if one is present.
 - `manual`
-  - : Elements are not automatically assigned to {{HTMLElement("slot")}} elements. Instead, they must be manually assigned with {{domxref("HTMLSlotElement.assign()")}}.
+  - : Elements are not automatically assigned to {{HTMLElement("slot")}} elements.
+    Instead, they must be manually assigned with {{domxref("HTMLSlotElement.assign()")}}.
 
 ## Examples
 
-In the example below, the `assign()` method is used to display the correct tab in a tabbed application. The function is called and passed the panel to show, which is then assigned to the slot. We test if the `slotAssignment` is `named` to prevent an exception to be raised when {{domxref("HTMLSlotElement.assign()")}} is called.
+### Basic usage
+
+In the example below, the `assign()` method is used to display the correct tab in a tabbed application.
+The function is called and passed the panel to show, which is then assigned to the slot.
+We test if the `slotAssignment` is `named` to prevent an exception to be raised when {{domxref("HTMLSlotElement.assign()")}} is called.
 
 ```js
 function UpdateDisplayTab(elem, tabIdx) {
diff --git a/files/en-us/web/html/reference/elements/template/index.md b/files/en-us/web/html/reference/elements/template/index.md
index 531c7722ac6381b..f929b20aeddfa88 100644
--- a/files/en-us/web/html/reference/elements/template/index.md
+++ b/files/en-us/web/html/reference/elements/template/index.md
@@ -53,11 +53,19 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 
 - `shadowrootslotassignment`
   - : Sets the [`slotAssignment`](/en-US/docs/Web/API/ShadowRoot/slotAssignment) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element.
-    This is the declarative equivalent of the `slotAssignment` option of the {{domxref("Element.attachShadow()")}} method.
+    This is the declarative equivalent of the [`slotAssignment`](/en-US/docs/Web/API/Element/attachShadow#slotassignment) option of the {{domxref("Element.attachShadow()")}} method.
     - `named`
-      - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root. This is the default value.
+      - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root.
+        This is the default value.
+
+        Elements with the [`slot` attribute](/en-US/docs/Web/API/Element/slot) are assigned to the {{htmlelement("slot")}} in the template that has the corresponding `name` attribute.
+        If multiple elements specify the same slot, they are added in the order they are declared.
+        All unnamed elements — elements that don't specify a `slot` attribute — are assigned to the default slot in the order they are declared.
+        This is the first unnamed `<slot>` in the template.
+
     - `manual`
-      - : Elements are not automatically assigned to {{HTMLElement("slot")}} elements. Instead, they must be manually assigned with {{domxref("HTMLSlotElement.assign()")}}.
+      - : Elements are manually assigned to particular slot elements using {{domxref("HTMLSlotElement.assign()")}}.
+        No automatic assignment takes place.
 
 ## Usage notes
 
@@ -84,6 +92,8 @@ This is the declarative equivalent of calling {{domxref("Element.attachShadow()"
 If the element has any other value for `shadowrootmode`, or does not have the `shadowrootmode` attribute, the parser generates a {{domxref("HTMLTemplateElement")}}.
 Similarly, if there are multiple declarative shadow roots, only the first one is replaced by a {{domxref("ShadowRoot")}} — subsequent instances are parsed as {{domxref("HTMLTemplateElement")}} objects.
 
+Other attributes prefixed with `shadowroot` allow declarative customization of the `ShadowRoot`, such as controlling how slots are assigned.
+
 ## Examples
 
 ### Generating table rows
@@ -270,13 +280,219 @@ This also focuses the parent element as shown below.
 
 ![Screenshot of the code where the element has focus](template_with_focus.png)
 
-## Data on the DocumentFragment is not cloned
+### Declarative shadow DOM with named slot assignment
+
+This example shows how elements can be assigned to slots in a shadow DOM based on their [`slot` attribute](/en-US/docs/Web/API/Element/slot) (matched against the slot's `name` attribute) and the template's `shadowrootslotassignment` attribute.
+
+#### HTML
+
+First we have a hidden support warning.
+This warning is later set to be displayed via JavaScript if the browser doesn't support the `shadowrootslotassignment` attribute.
+
+```html
+<p id="support-warning" hidden>
+  ⛔ Your browser doesn't support the
+  <code>shadowrootslotassignment</code> attribute yet.
+</p>
+```
+
+Next, we define an {{HTMLElement("article")}} element that presents title, metadata, and article body information.
+
+The article contains a `<template>` element that will become a shadow root, because of the presence of the `shadowrootmode` attribute, and will use named slot assignment because `shadowrootslotassignment="named"` is set.
+
+The template defines elements that have named slots for "header" and "meta" information, and an unnamed slot for "body" information.
+The elements are styled differently so it is easy to differentiate them.
+
+```html
+<article id="host">
+  <template shadowrootmode="open" shadowrootslotassignment="named">
+    <style>
+      .header {
+        background-color: plum;
+      }
+      .meta {
+        background-color: green;
+      }
+      .body {
+        background-color: lightblue;
+      }
+    </style>
+
+    <h2 class="header">
+      <slot name="title"></slot>
+    </h2>
+
+    <div class="meta">
+      <slot name="meta"></slot>
+    </div>
+
+    <div class="body">
+      <slot></slot>
+    </div>
+  </template>
+
+  <p>
+    Text 1 with no slot attribute. Goes into default (unnamed) slot inside the
+    "body" div.
+  </p>
+  <span slot="title">Text for the title slot</span>
+  <span slot="meta">Text for the meta slot</span>
+  <p>
+    Text 2 with no slot attribute. Also goes into default (unnamed) slot inside
+    the "body" div.
+  </p>
+</article>
+```
+
+Inside the same host, below the template, we have four elements for populating the slots.
+The {{htmlelement("span")}} elements have `slot` attributes that match the `name` attributes on slots in the template, and will populate the corresponding slots.
+The two {{htmlelement("p")}} elements are unnamed, so are both inserted into the unnamed `<slot>` in the "body" element.
+
+#### JavaScript
+
+The code displays the hidden support warning if slot assignment is not supported.
+
+```js
+const isShadowRootSlotAssignmentSupported = Object.hasOwn(
+  HTMLTemplateElement.prototype,
+  "shadowRootSlotAssignment",
+);
+
+document
+  .querySelector("p[hidden]")
+  .toggleAttribute("hidden", isShadowRootSlotAssignmentSupported);
+```
+
+#### Results
+
+The example below should show the content of the slots displayed in the appropriate sections.
+
+{{EmbedLiveSample('Declarative shadow DOM with named slot assignment','100', '220px')}}
+
+> [!NOTE]
+> The example will still work even if the warning is displayed that shadowroot slot assignment is not supported.
+> This is because `named` assignment precedes the introduction of the `shadowrootslotassignment` attribute.
+
+### Declarative shadow DOM with manual slot assignment
+
+This example shows how elements can be assigned to slots in a shadow DOM using manual slot assignment.
+
+With this approach, each element must manually be assigned to a particular slot.
+There is no default assignment, so any slot that is not assigned will be empty.
+
+#### HTML
+
+First we have a hidden support warning.
+This warning is later set to be displayed via JavaScript if the browser doesn't support the `shadowrootslotassignment` attribute.
+
+```html
+<p id="support-warning" hidden>
+  ⛔ Your browser doesn't support the
+  <code>shadowrootslotassignment</code> attribute yet.
+</p>
+```
+
+Next, we define an {{HTMLElement("article")}} element that presents title, metadata, and article body information.
+This contains a `<template>` element that will become a shadow root, because of the presence of the `shadowrootmode` attribute, and will use manual slot assignment because `shadowrootslotassignment="manual"` is set.
+
+The template defines elements that have slots for "header", "meta", and body information, that can be separately referenced by their `id` attribute.
+The elements are styled differently so it is easy to differentiate them.
+
+```html
+<article id="host">
+  <template shadowrootmode="open" shadowrootslotassignment="manual">
+    <style>
+      .header {
+        background-color: plum;
+      }
+      .meta {
+        background-color: green;
+      }
+      .body {
+        background-color: lightblue;
+      }
+    </style>
+
+    <h2 class="header">
+      <slot id="titleSlot"></slot>
+    </h2>
+
+    <div class="meta">
+      <slot id="metaSlot"></slot>
+    </div>
+
+    <div class="body">
+      <slot id="bodySlot"></slot>
+    </div>
+  </template>
+
+  <span id="text_title">Text for the title slot</span>
+  <span id="text_meta">Text for the meta slot</span>
+  <p id="text_body_1">Text 1 for body slot.</p>
+  <p id="text_body_2">Text 2 for body slot.</p>
+</article>
+```
+
+Inside the same host, below the template, we have four elements for populating the slots.
+These are also identified by id.
+
+#### JavaScript
+
+The JavaScript for manual slot assignment is shown below.
+First the code gets the slots within the shadow root, then the text to be inserted, and finally assigns the text to the slot.
+Note that you can only assign a node once to any particular slot, and that if you assign multiple nodes to a single slot using {{domxref("HTMLSlotElement.assign()")}}, the order they are specified controls the order they are added.
+
+```js
+const host = document.querySelector("#host");
+const shadow = host.shadowRoot;
+
+// 1. Target your slots
+const titleSlot = shadow.querySelector("#titleSlot");
+const metaSlot = shadow.querySelector("#metaSlot");
+const bodySlot = shadow.querySelector("#bodySlot");
+
+// 2. Target your light DOM elements
+const body1Text = document.querySelector("#text_body_1");
+const body2Text = document.querySelector("#text_body_2");
+const titleText = document.querySelector("#text_title");
+const metaText = document.querySelector("#text_meta");
+
+// 3. Manually assign them
+titleSlot.assign(titleText);
+metaSlot.assign(metaText);
+bodySlot.assign(body2Text, body1Text);
+```
+
+The code displays the hidden support warning if slot assignment is not supported.
+
+```js
+const isShadowRootSlotAssignmentSupported = Object.hasOwn(
+  HTMLTemplateElement.prototype,
+  "shadowRootSlotAssignment",
+);
+
+document
+  .querySelector("p[hidden]")
+  .toggleAttribute("hidden", isShadowRootSlotAssignmentSupported);
+```
+
+#### Results
+
+The example below should show the content of the slots displayed in the appropriate sections.
+
+{{EmbedLiveSample('Declarative shadow DOM with manual slot assignment','100', '220px')}}
+
+> [!NOTE]
+> If the `shadowrootslotassignment` attribute is not supported a warning note is displayed and the browser will use `named` assignment.
+> However, because none of the slots or elements to be inserted are named, all the elements will be inserted into the title slot (because this is the first unnamed slot, and hence is the "default" slot).
+
+### Data on the DocumentFragment is not cloned
 
 When a {{domxref("DocumentFragment")}} value is passed, {{domxref("Node.appendChild")}} and similar methods move only the _child nodes_ of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a `DocumentFragment`, rather than to the `DocumentFragment` itself.
 
 Consider the following HTML and JavaScript:
 
-### HTML
+#### HTML
 
 ```html
 <div id="container"></div>
@@ -286,7 +502,7 @@ Consider the following HTML and JavaScript:
 </template>
 ```
 
-### JavaScript
+#### JavaScript
 
 ```js
 const container = document.getElementById("container");
@@ -305,7 +521,7 @@ secondClone.children[0].addEventListener("click", clickHandler);
 container.appendChild(secondClone);
 ```
 
-### Result
+#### Result
 
 Since `firstClone` is a `DocumentFragment`, only its children are added to `container` when `appendChild` is called; the event handlers of `firstClone` are not copied. In contrast, because an event handler is added to the first _child node_ of `secondClone`, the event handler is copied when `appendChild` is called, and clicking on it works as one would expect.
 

From 54f68735bc6d71c4af47d551b6100fab2392e7cd Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Tue, 28 Apr 2026 12:04:49 +1000
Subject: [PATCH 4/5] HTMLTemplateElement.shadowRootAssignment update

---
 .../shadowrootslotassignment/index.md         | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
index 425c172ef506a38..89fb45f5e0131c3 100644
--- a/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
+++ b/files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md
@@ -10,14 +10,30 @@ browser-compat: api.HTMLTemplateElement.shadowRootSlotAssignment
 
 The **`shadowRootSlotAssignment`** property of the {{domxref("HTMLTemplateElement")}} interface reflects the value of the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Reference/Elements/template) element.
 
-Note that this property is not useful for developers.
-If a `<template>` element is used to declaratively create a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), then this object and property do not exist.
-Otherwise, if an `HTMLTemplateElement` is created, the value of this property is irrelevant because the object is not a shadow root and cannot subsequently be changed to a shadow root. It can be used to detect support for the declarative attribute.
+This property can be used to detect support for the declarative attribute.
+
+The property has no other purpose for developers:
+
+- If a `<template>` element is used to declaratively create a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), then no instance of this object and property exist.
+- If an `HTMLTemplateElement` is created, the value of this property is irrelevant because the object is not a shadow root and cannot subsequently be changed to a shadow root.
 
 ## Value
 
 A string that reflects the value of the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Reference/Elements/template) element. Possible values are `"named"` and `"manual"`.
 
+## Example
+
+### Basic usage
+
+This code shows how you can check if the [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) attribute is supported on {{htmlelement("template")}} elements.
+
+```js
+const isShadowRootSlotAssignmentSupported = Object.hasOwn(
+  HTMLTemplateElement.prototype,
+  "shadowRootSlotAssignment",
+);
+```
+
 ## Specifications
 
 {{Specifications}}

From 292c737a56f67ef1bea98a2f855d22619d901a53 Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Tue, 28 Apr 2026 14:21:44 +1000
Subject: [PATCH 5/5] Element.attachShadow() example

---
 .../web/api/element/attachshadow/index.md     | 122 +++++++++++++++++-
 .../web/html/reference/elements/slot/index.md |  36 +++---
 2 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/files/en-us/web/api/element/attachshadow/index.md b/files/en-us/web/api/element/attachshadow/index.md
index 60f5afca868cb3f..3f958cb6ca54daa 100644
--- a/files/en-us/web/api/element/attachshadow/index.md
+++ b/files/en-us/web/api/element/attachshadow/index.md
@@ -97,10 +97,13 @@ attachShadow(options)
     - `slotAssignment` {{Optional_inline}}
       - : A string specifying the _slot assignment mode_ for the shadow DOM tree. This can be one of:
         - `named`
-          - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root. Any descendants of the host with a `slot` attribute which matches the `name` attribute of a `<slot>` within this shadow root will be assigned to that slot. Any top-level children of the host with no `slot` attribute will be assigned to a `<slot>` with no `name` attribute (the "default slot") if one is present.
+          - : Elements are automatically assigned to {{HTMLElement("slot")}} elements within this shadow root.
+            Any descendants of the host with a `slot` attribute which matches the `name` attribute of a `<slot>` within this shadow root will be assigned to that slot.
+            Any top-level children of the host with no `slot` attribute will be assigned to a `<slot>` with no `name` attribute (the "default slot") if one is present.
+            This is the default value.
         - `manual`
-          - : Elements are not automatically assigned to {{HTMLElement("slot")}} elements. Instead, they must be manually assigned with {{domxref("HTMLSlotElement.assign()")}}.
-            Its default value is `named`.
+          - : Elements are manually assigned to particular slot elements using {{domxref("HTMLSlotElement.assign()")}}.
+            No automatic assignment takes place.
 
 ### Return value
 
@@ -191,6 +194,119 @@ class MyCustomElement extends HTMLElement {
 customElements.define("my-custom-element", MyCustomElement);
 ```
 
+### Shadow DOM with named slot assignment
+
+This example demonstrates named slot assignment.
+
+#### Feature checking
+
+This part of the example defines a warning that will indicate if the type of slot assignment can be changed.
+
+First we create HTML that displays the warning if the mechanism is not supported.
+
+```html
+<p id="support-warning" hidden>
+  ⛔ Your browser doesn't support setting slot assignment (named assignment is
+  used).
+</p>
+```
+
+This code tests if the {{domxref("ShadowRoot.slotAssignment")}} property is defined, and uses the result to display the warning if it is not.
+
+```js
+const isSlotAssignmentSupported = Object.hasOwn(
+  ShadowRoot.prototype,
+  "slotAssignment",
+);
+
+document
+  .querySelector("p[hidden]")
+  .toggleAttribute("hidden", isSlotAssignmentSupported);
+```
+
+#### Creating the web component
+
+This code creates a web component that has three named slots for an article's title, metadata, and body section.
+The ShadowRoot is created with `slotAssignment: "named"`.
+
+```js
+class MyArticle extends HTMLElement {
+  constructor() {
+    super();
+    // Attach the shadow root specifying that slotAssignment is "named" (not manual)
+    this.attachShadow({ mode: "open", slotAssignment: "named" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    // Define the internal structure and styles
+    this.shadowRoot.innerHTML = `
+      <style>
+        .header {
+          background-color: plum;
+        }
+        .meta {
+          background-color: green;
+        }
+        .body {
+          background-color: lightblue;
+        }
+      </style>
+
+      <h2 class="header">
+        <slot name="title"></slot>
+      </h2>
+
+      <div class="meta">
+        <slot name="meta"></slot>
+      </div>
+
+      <div class="body">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+customElements.define("my-article", MyArticle);
+```
+
+#### Using the web component
+
+The HTML below uses the `<my-article>` web component we just created.
+The nested elements are rendered in the component's slots based on name matching.
+The unnamed elements are rendered in the component's unnamed slot (the body).
+
+```html
+<my-article>
+  <span slot="title">Text for the title slot</span>
+  <span slot="meta">Text for the meta slot</span>
+
+  <p>
+    Text 1 with no slot attribute. Goes into default (unnamed) slot inside the
+    "body" div.
+  </p>
+  <p>
+    Text 2 with no slot attribute. Also goes into default (unnamed) slot inside
+    the "body" div.
+  </p>
+</my-article>
+```
+
+#### Results
+
+The example below should show the content of the slots displayed in the appropriate sections.
+
+{{EmbedLiveSample('Shadow DOM with named slot assignment','100', '220px')}}
+
+> [!NOTE]
+> The example will still work even if the warning is displayed that shadow root slot assignment is not supported.
+> This is because `named` assignment predates the introduction of the `slotAssignment` property.
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/reference/elements/slot/index.md b/files/en-us/web/html/reference/elements/slot/index.md
index b66cfe10c701871..7632328f0d36fd4 100644
--- a/files/en-us/web/html/reference/elements/slot/index.md
+++ b/files/en-us/web/html/reference/elements/slot/index.md
@@ -14,7 +14,15 @@ The **`<slot>`** [HTML](/en-US/docs/Web/HTML) element—part of the [Web Compone
 This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
 
 - `name`
-  - : The slot's name. When the slot's containing component gets rendered, the slot is rendered with the custom element's child that has a matching [`slot`](/en-US/docs/Web/HTML/Reference/Global_attributes/slot) attribute. A _named slot_ is a `<slot>` element with a `name` attribute. Unnamed slots have the name default to the empty string. Names should be unique per shadow root: if you have two slots with the same name, all of the elements with a matching `slot` attribute will be assigned to the first slot with that name.
+  - : The slot's name.
+    A _named slot_ is a `<slot>` element with a `name` attribute, while unnamed slots have no `name` attribute, and the name defaults to the empty string.
+
+    When the associated shadow root uses [named slot assignment](/en-US/docs/Web/HTML/Reference/Elements/template#named), the slot's containing element is rendered with elements in the same host that have a [`slot` attribute](/en-US/docs/Web/API/Element/slot) with the same name.
+    All elements that don't have a `slot` attribute are rendered in the first unnamed `<slot>` element, which is referred to as the _default slot_.
+    Slot names should be unique per shadow root: if you have two slots with the same name, all of the elements with a matching `slot` attribute will be assigned to the first slot with that name.
+    The `name` has no effect if [manual slot assignment](/en-US/docs/Web/HTML/Reference/Elements/template#manual) is used.
+
+    For more information see [`shadowrootslotassignment`](/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) on the `<template>` element and [`Element.attachShadow()`](/en-US/docs/Web/API/Element/attachShadow#slotassignment).
 
 ## Examples
 
@@ -71,26 +79,17 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
   <tbody>
     <tr>
       <th scope="row">
-        <a href="/en-US/docs/Web/HTML/Guides/Content_categories"
-          >Content categories</a
-        >
+        <a href="/en-US/docs/Web/HTML/Guides/Content_categories">Content categories</a>
       </th>
       <td>
-        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content"
-          >Flow content</a
-        >,
-        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content"
-          >phrasing content</a
-        >
+        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content">Flow content</a>,
+        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content">phrasing content</a>
       </td>
     </tr>
     <tr>
       <th scope="row">Permitted content</th>
       <td>
-        <a
-          href="/en-US/docs/Web/HTML/Guides/Content_categories#transparent_content_model"
-          >Transparent</a
-        >
+        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#transparent_content_model">Transparent</a>
       </td>
     </tr>
     <tr>
@@ -104,18 +103,13 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
     <tr>
       <th scope="row">Permitted parents</th>
       <td>
-        Any element that accepts
-        <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content"
-          >phrasing content</a
-        >
+        Any element that accepts <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content">phrasing content</a>
       </td>
     </tr>
     <tr>
       <th scope="row">Implicit ARIA role</th>
       <td>
-        <a href="https://w3c.github.io/html-aria/#dfn-no-corresponding-role"
-          >No corresponding role</a
-        >
+        <a href="https://w3c.github.io/html-aria/#dfn-no-corresponding-role">No corresponding role</a>
       </td>
     </tr>
     <tr>