Add docs for shadow root serializable property (everywhere)

files/en-us/web/api/element/attachshadow/index.md

@@ -83,6 +83,12 @@ attachShadow(options)
       - : A boolean that, when set to `true`, specifies behavior that mitigates custom element issues around focusability.
         When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available `:focus` styling. Its default value is `false`.
 
+    - `serializable` {{Optional_Inline}}
+
+      - : A boolean that, when set to `true`, indicates that the shadow root is serializable.
+        Its default value is `false`.
+        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`.
+
     - `slotAssignment` {{Optional_inline}}
 
       - : A string specifying the _slot assignment mode_ for the shadow DOM tree. This can be one of:

files/en-us/web/api/element/gethtml/index.md

@@ -12,10 +12,12 @@ browser-compat: api.Element.getHTML
 
 The **`getHTML()`** method of the {{domxref("Element")}} interface is used to serialize an element's DOM to an HTML string.
 
+The serialized HTML does not include shadow trees by default, but options can be used to include shadow roots that have been set as {{domxref("ShadowRoot/serializable","serializable")}}, and/or a specified array of {{domxref("ShadowRoot")}} objects.
+
 ## Syntax
 
 ```js-nolint
-const html = element.getHTML(options)
+getHTML(options)
 ```
 
 ### Parameters
@@ -25,10 +27,11 @@ const html = element.getHTML(options)
   - : An options object with the following optional parameters:
 
     - `serializableShadowRoots`
-      - : A boolean value that specifies whether to include serializable shadow roots. The default value is `false`.
+      - : A boolean value that specifies whether to include {{domxref("ShadowRoot/serializable","serializable")}} shadow roots.
+        The default value is `false`.
     - `shadowRoots`
-      - : An array of {{domxref("ShadowRoot")}} objects to serialize. These are included regardless of whether they
-        are marked as serializable. The default value is an empty array.
+      - : An array of {{domxref("ShadowRoot")}} objects to serialize. These are included regardless of whether they are marked as `serializable`.
+        The default value is an empty array.
 
 ### Return value
 

files/en-us/web/api/htmltemplateelement/index.md

@@ -20,6 +20,7 @@ The **`HTMLTemplateElement`** interface enables access to the contents of an HTM
 _This interface inherits the properties of {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLTemplateElement.content", "content")}} {{ReadOnlyInline}}
+
   - : A read-only {{domxref("DocumentFragment")}} which contains the DOM subtree representing the {{HTMLElement("template")}} element's template contents.
 - {{domxref("HTMLTemplateElement.shadowRootMode", "shadowRootMode")}}
   - : A string that reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated `<template>` element.
@@ -28,6 +29,9 @@ _This interface inherits the properties of {{domxref("HTMLElement")}}._
 - {{domxref("HTMLTemplateElement.shadowRootClonable", "shadowRootClonable")}}
   - : A boolean that reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated `<template>` element.
 
+- {{domxref("HTMLTemplateElement.shadowRootSerializable", "shadowRootSerializable")}}
+  - : A boolean that reflects the value of the [`shadowrootserializable`](/en-US/docs/Web/HTML/Element/template#shadowrootserializable) attribute of the associated `<template>` element.
+
 ## Instance methods
 
 _This interface inherits the methods of {{domxref("HTMLElement")}}._

files/en-us/web/api/htmltemplateelement/shadowrootserializable/index.md

@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootSerializable property"
+short-title: content
+slug: Web/API/HTMLTemplateElement/shadowRootSerializable
+page-type: web-api-instance-property
+browser-compat: api.HTMLTemplateElement.shadowRootSerializable
+---
+
+{{APIRef("Web Components")}}
+
+The **`shadowRootSerializable`** property reflects the value of the [`shadowrootserializable`](/en-US/docs/Web/HTML/Element/template#shadowrootserializable) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/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.
+
+## Value
+
+Reflects the value of the [`shadowrootserializable`](/en-US/docs/Web/HTML/Element/template#shadowrootserializable) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`shadowrootserializable`](/en-US/docs/Web/HTML/Element/template#shadowrootserializable) attribute of the `<template>` element
+- [`ShadowRoot.serializable`](/en-US/docs/Web/API/ShadowRoot/serializable)

files/en-us/web/api/shadowroot/gethtml/index.md

@@ -25,10 +25,12 @@ const html = shadowRoot.getHTML(options)
   - : An options object with the following optional parameters:
 
     - `serializableShadowRoots`
-      - : A boolean value that specifies whether to include serializable shadow roots. The default value is `false`.
+      - : A boolean value that specifies whether to include [serializable](/en-US/docs/Web/API/ShadowRoot/serializable) shadow roots.
+        The default value is `false`.
     - `shadowRoots`
-      - : An array of {{domxref("ShadowRoot")}} objects to serialize. These are included regardless of whether they
-        are marked as serializable. The default value is an empty array.
+      - : An array of {{domxref("ShadowRoot")}} objects to serialize.
+        These are included regardless of whether they are marked as `serializable`.
+        The default value is an empty array.
 
 ### Return value
 
@@ -48,4 +50,5 @@ None.
 
 ## See Also
 
+- {{domxref("Element.getHTML()")}}
 - {{domxref("ShadowRoot.innerHTML")}}

files/en-us/web/api/shadowroot/index.md

@@ -21,9 +21,9 @@ You can retrieve a reference to an element's shadow root using its {{domxref("El
   - : Add an array of constructed stylesheets to be used by the shadow DOM subtree.
     These may be shared with other DOM subtrees that share the same parent {{domxref("Document")}} node, and the document itself.
 - {{domxref("ShadowRoot.clonable")}} {{ReadOnlyInline}}
-  - : Returns a boolean that indicates whether the shadow root is clonable, which can be set via the {{domxref("Element.attachShadow()")}} `clonable` option.
+  - : A boolean that indicates whether the shadow root is clonable.
 - {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}}
-  - : Returns a boolean that indicates whether `delegatesFocus` was set when the shadow was attached (see {{domxref("Element.attachShadow()")}}).
+  - : A boolean that indicates whether the shadow root delegates focus if a non-focusable node is selected.
 - {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}}
   - : The element that's currently in full screen mode for this shadow tree.
 - {{domxref("ShadowRoot.host")}} {{ReadOnlyInline}}
@@ -38,6 +38,10 @@ You can retrieve a reference to an element's shadow root using its {{domxref("El
 - {{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}}
   - : Returns the {{DOMxRef('Element')}} set as the target for mouse events while the pointer is locked.
     `null` if lock is pending, pointer is unlocked, or if the target is in another tree.
+- {{DOMxRef("ShadowRoot.serializable")}} {{ReadOnlyInline}}
+  - : A boolean that indicates whether the shadow root is serializable.
+    A serializable shadow root inside an element will be serialized by {{DOMxRef('Element.getHTML()')}} or {{DOMxRef('ShadowRoot.getHTML()')}} when its [`options.serializableShadowRoots`](/en-US/docs/Web/API/Element/getHTML#serializableshadowroots) parameter is set `true`.
+    This is set when the shadow root is created.
 - {{DOMxRef("ShadowRoot.slotAssignment")}} {{ReadOnlyInline}}
   - : Returns a string containing the type of slot assignment, either `manual` or `named`.
 - {{domxref("ShadowRoot.styleSheets")}} {{ReadOnlyInline}}

files/en-us/web/api/shadowroot/serializable/index.md

@@ -0,0 +1,39 @@
+---
+title: "ShadowRoot: serializable property"
+short-title: serializable
+slug: Web/API/ShadowRoot/serializable
+page-type: web-api-instance-property
+browser-compat: api.ShadowRoot.serializable
+---
+
+{{APIRef("Shadow DOM")}}
+
+The **`serializable`** read-only property of the {{domxref("ShadowRoot")}} interface returns `true` if the shadow root is serializable.
+
+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 serializable property of a shadow root is specified when the shadow root is created, either declaratively by adding the [`shadowrootserializable`](/en-US/docs/Web/HTML/Element/template#shadowrootserializable) attribute on a `<template>` element (along with an allowed [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) value), or by setting the [`options.serializable`](/en-US/docs/Web/API/Element/attachShadow#serializable) parameter to `true` when using [`Element.attachShadow()`](/en-US/docs/Web/API/Element/attachShadow).
+
+## Value
+
+`true` if the shadow root is serializable; `false` otherwise.
+
+## Examples
+
+```js
+let customElem = document.querySelector("my-shadow-dom-element");
+let shadow = customElem.shadowRoot;
+
+// ...
+
+// Is it serializable?
+let hostElem = shadow.serializable;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/html/element/template/index.md

@@ -32,16 +32,21 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 
     > **Note:** You may find the non-standard `shadowroot` attribute in older tutorials and examples that used to be supported in Chrome 90-110. This attribute has since been removed and replaced by the standard `shadowrootmode` attribute.
 
+- `shadowrootclonable`
+
+  - : Sets the value of the [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element to `true`.
+    If set, a clone of the shadow host (the parent element of this `<template>`) created with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include a shadow root in the copy.
+
 - `shadowrootdelegatesfocus`
 
   - : Sets the value of the [`delegatesFocus`](/en-US/docs/Web/API/ShadowRoot/delegatesFocus) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element to `true`.
     If this is set and a non-focusable element in the shadow tree is selected, then focus is delegated to the first focusable element in the tree.
     The value defaults to `false`.
 
-- `shadowrootclonable`
+- `shadowrootserializable`
 
-  - : Sets the value of the [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element to `true`.
-    If set, a clone of the shadow host (the parent element of this `<template>`) created with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include a shadow root in the copy.
+  - : Sets the value of the [`serializable`](/en-US/docs/Web/API/ShadowRoot/serializable) property of a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) created using this element to `true`.
+    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`.
 
 ## Usage notes