Fix up the API properties to be clearly irrelevant

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

@@ -18,14 +18,19 @@ _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")}}
-  - : Indicates the value of the [`mode`](/en-US/docs/Web/API/ShadowRoot/mode) property of a declaratively created [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot).
-    This reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated `<template>` element.
+
+  - : A string that reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated `<template>` element.
+
+    > **Note:** The "shadow" properties of this object have has no practical use.
+    > If the corresponding `<template>` element declaratively creates a [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot) then there is no `HTMLTemplateElement` object.
+    > Otherwise an `HTMLTemplateElement` object is created that reflects the element, but this cannot subsequently be changed to a `ShadowRoot`.
+
 - {{domxref("HTMLTemplateElement.shadowRootDelegatesFocus", "shadowRootDelegatesFocus")}}
-  - : Indicates the [`delegatesFocus`](/en-US/docs/Web/API/ShadowRoot/delegatesFocus) property of a declaratively created [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot).
-    This reflects the value of the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) attribute of the associated `<template>` element.
+  - : A boolean that reflects the value of the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) attribute of the associated `<template>` element.
+    This has no practical use.
 - {{domxref("HTMLTemplateElement.shadowRootClonable", "shadowRootClonable")}}
-  - : Indicates the [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable) property of a declaratively created [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot).
-    This reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated `<template>` element.
+  - : A boolean that reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated `<template>` element.
+    This has no practical use.
 
 ## Instance methods
 

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

@@ -8,41 +8,15 @@ browser-compat: api.HTMLTemplateElement.shadowRootClonable
 
 {{APIRef("Web Components")}}
 
-The **`shadowRootClonable`** property of the {{domxref("HTMLTemplateElement")}} interface indicates whether a [shadow root](/en-US/docs/Glossary/Shadow_tree) that that was [declaratively created](/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom) is [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable).
+The **`shadowRootClonable`** property reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
-If this is `true` then a shadow host cloned with {{domxref("Node.cloneNode()")}} or {{domxref("Document.importNode()")}} will include a shadow root in the copy.
-The default value is `false`.
-
-This property reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) 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
 
-`true` if the shadow root of is clonable; otherwise `false`.
-
-## Examples
-
-This example shows how you can create a shadow root declaratively, specifying the `shadowrootclonable` attribute on the associated `<template>` and then logging the `shadowRootClonable` value to show that the shadow root is clonable.
-
-We declare a shadow root by specifying a `<template>` element with the `shadowrootmode` attribute set to one of the allowed values.
-The `shadowrootclonable` attribute is also set, making the shadow root clonable.
-
-```html
-<div>
-  <template id="clonable" shadowrootmode="open" shadowrootclonable>
-    <slot></slot>
-  </template>
-  <h2>Shadow root not clonable</h2>
-</div>
-```
-
-We can log whether the shadow root is clonable or not using the following JavaScript:
-
-```js
-const clonableShadowDOM = document.querySelector("#clonable");
-console.log(
-  `Value of shadowRootClonable attribute: ${clonableShadowDOM.shadowRootClonable}`,
-);
-```
+Reflects the value of the [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
 ## Specifications
 
@@ -54,5 +28,5 @@ console.log(
 
 ## See also
 
-- {{domxref("HTMLTemplateElement")}}
 - [`shadowrootclonable`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the `<template>` element
+- [`ShadowRoot.clonable`](/en-US/docs/Web/API/ShadowRoot/clonable)

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

@@ -8,44 +8,15 @@ browser-compat: api.HTMLTemplateElement.shadowRootDelegatesFocus
 
 {{APIRef("Web Components")}}
 
-The **`shadowRootDelegatesFocus`** property of the {{domxref("HTMLTemplateElement")}} interface indicates whether a [shadow root](/en-US/docs/Glossary/Shadow_tree) that that was [declaratively created](/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom) will [delegate focus](/en-US/docs/Web/API/ShadowRoot/delegatesFocus).
+The **`shadowRootDelegatesFocus`** property of the {{domxref("HTMLTemplateElement")}} interface reflects the value of the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
-If the value is `true`, then selecting a non-focusable element in the [shadow tree](/en-US/docs/Glossary/Shadow_tree) (or calling `focus()` on the host element) will cause the focus to be given to the first focusable element in the tree. The host is then given any available [`:focus`](/en-US/docs/Web/CSS/:focus) styling.
-By default the value is `false`, so if a non-focusable element in the shadow tree is selected the focus will remain with the previously focused element.
-
-This property reflects the value of the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 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
 
-`true` if the shadow root delegates focus; otherwise `false`.
-
-## Examples
-
-This example shows how you can create a shadow root declaratively, specifying the `shadowrootdelegatesfocus` attribute on the associated `<template>`.
-It then logs the `shadowRootDelegatesFocus` property of the shadow root.
-
-First declare a declarative shadow root by specifying a `<template>` element with the `shadowrootmode` attribute set to one of the allowed values.
-The `shadowrootdelegatesfocus` attribute is also set, making the shadow root delegate focus.
-
-```html
-<div>
-  <template id="delegatesfocus" shadowrootmode="open" shadowrootdelegatesfocus>
-    <slot></slot>
-  </template>
-  <h2>Shadow root delegates focus</h2>
-</div>
-```
-
-We can log whether the shadow root delegates focus or not using the following JavaScript:
-
-```js
-const delegatesFocusRoot = document.querySelector("#delegatesfocus");
-console.log(
-  `Value of shadowRootDelegatesFocus property: ${delegatesFocusRoot.shadowRootDelegatesFocus}`,
-);
-```
-
-The [Declarative Shadow DOM with delegated focus](/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom_with_delegated_focus) example in the `<template>` documentation demonstrates the effects of delegating focus.
+Reflects the value of the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
 ## Specifications
 
@@ -57,5 +28,5 @@ The [Declarative Shadow DOM with delegated focus](/en-US/docs/Web/HTML/Element/t
 
 ## See also
 
-- {{domxref("HTMLTemplateElement")}}
 - [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) attribute of the `<template>` element
+- [`ShadowRoot.delegatesFocus`](/en-US/docs/Web/API/ShadowRoot/delegatesFocus)

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

@@ -8,23 +8,15 @@ browser-compat: api.HTMLTemplateElement.shadowRootMode
 
 {{APIRef("Web Components")}}
 
-The **`shadowRootMode`** property of the {{domxref("HTMLTemplateElement")}} interface indicates whether a [shadow root](/en-US/docs/Glossary/Shadow_tree) that that was [declaratively created](/en-US/docs/Web/HTML/Element/template#declarative_shadow_dom) is open or closed to inspection via JavaScript.
+The **`shadowRootMode`** property of the {{domxref("HTMLTemplateElement")}} interface reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
-This property reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
-
-<!--
-    > **Note:** This is a feature of the HTML parser that cannot be used post-parsing by setting the `shadowrootmode` attribute through JavaScript. Only allowed values will create the shadow root; any other values, including empty ones, won't trigger this behavior.
--->
+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
 
-- `open`
-
-  - : The internal shadow root DOM is exposed to JavaScript (recommended for most use cases).
-
-- `closed`
-
-  - : The internal shadow root DOM is hidden from JavaScript.
+Reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the associated [`<template>`](/en-US/docs/Web/HTML/Element/template) element.
 
 ## Specifications
 
@@ -36,4 +28,5 @@ This property reflects the value of the [`shadowrootmode`](/en-US/docs/Web/HTML/
 
 ## See also
 
-- {{domxref("HTMLTemplateElement")}}
+- [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the `<template>` element
+- [`ShadowRoot.mode`](/en-US/docs/Web/API/ShadowRoot/mode)

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

@@ -14,8 +14,7 @@ If `true`, when a non-focusable part of the shadow DOM is clicked, or `.focus()`
 
 Focus is of particular importance for keyboard users (including those using screen readers). `delegatesFocus` default behavior is to focus the first focusable element — which may be undesirable if that element is not meant to be part of the tabbing order (for example, an element with `tabindex="-1"`), or if a more 'important' focusable element should receive initial focus (for instance, the first text field rather than the 'close' button which precedes it). In such cases, the `autofocus` attribute can be specified on the element which should receive initial focus. Use the `autofocus` attribute with caution as it can introduce accessibility issues, such as bypassing important content which may go unnoticed due to focus being set to an element later in the DOM order.
 
-The property value is set using the `delegatesFocus` property of the object passed to {{domxref("Element.attachShadow()")}}, or using the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the [`<template>`](/en-US/docs/Web/HTML/Element/template) element when a shadow root is created declaratively.
-It can also be set using the [`shadowRootDelegatesFocus`](/en-US/docs/Web/API/HTMLTemplateElement/shadowRootDelegatesFocus) property of the `HTMLTemplateElement` object that corresponds to a declaratively created shadow root.
+The property value is originally set using the `delegatesFocus` property of the object passed to {{domxref("Element.attachShadow()")}}, or using the [`shadowrootdelegatesfocus`](/en-US/docs/Web/HTML/Element/template#shadowrootclonable) attribute of the [`<template>`](/en-US/docs/Web/HTML/Element/template) element when a shadow root is created declaratively.
 
 ## Value
 

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

@@ -8,20 +8,21 @@ browser-compat: api.ShadowRoot.mode
 
 {{APIRef("Shadow DOM")}}
 
-The **`mode`** read-only property of the {{domxref("ShadowRoot")}}
-specifies its mode — either `open` or `closed`. This defines
-whether or not the shadow root's internal features are accessible from JavaScript.
+The **`mode`** read-only property of the {{domxref("ShadowRoot")}} specifies its mode — either `open` or `closed`.
+This defines whether or not the shadow root's internal features are accessible from JavaScript.
 
-When the `mode` of a shadow root is "`closed`", the shadow root's
-implementation internals are inaccessible and unchangeable from JavaScript—in the same
-way the implementation internals of, for example, the {{HTMLElement("video")}} element
-are inaccessible and unchangeable from JavaScript.
+When the `mode` of a shadow root is "`closed`", the shadow root's implementation internals are inaccessible and unchangeable from JavaScript—in the same way the implementation internals of, for example, the {{HTMLElement("video")}} element are inaccessible and unchangeable from JavaScript.
+
+The property value is set using the `options.mode` property of the object passed to {{domxref("Element.attachShadow()")}}, or using the [`shadowrootmode`](/en-US/docs/Web/HTML/Element/template#shadowrootmode) attribute of the [`<template>`](/en-US/docs/Web/HTML/Element/template) element when a shadow root is created declaratively.
 
 ## Value
 
-A value defined in the
-[`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode)
-enum — either `open` or `closed`.
+A string value that can have either of the values:
+
+- `open`
+  - : Elements of the shadow root are accessible from JavaScript outside the root.
+- `closed`
+  - : Nodes inside the closed shadow tree cannot be accessed by JavaScript outside of the root.
 
 ## Examples
 

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

@@ -26,23 +26,23 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 
       - : Hides the internal shadow root DOM from JavaScript.
 
-    > **Note:** The value is reflected by {{domxref("HTMLTemplateElement.shadowRootMode")}}.
-    > This is a feature of the HTML parser that cannot be used post-parsing by setting the `shadowrootmode` attribute through JavaScript.
-    > Only allowed values will create the shadow root; any other values, including empty ones, won't trigger this behavior.
+    > **Note:** If this attribute is set, the HTML parser creates a {{domxref("ShadowRoot")}} object in the DOM.
+    > If the attribute is not set, or not set to an allowed value, then a {{domxref("HTMLTemplateElement")}} is constructed.
+    > A {{domxref("HTMLTemplateElement")}} cannot subsequently be changed into a shadow root after parsing, for example, by setting {{domxref("HTMLTemplateElement.shadowRootMode")}}.
 
     > **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.
 
 - `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` and is reflected by {{domxref("HTMLTemplateElement.shadowRootDelegatesFocus")}}.
+    The value defaults to `false`.
 
 - `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.
-    The value defaults to `false` and is reflected by {{domxref("HTMLTemplateElement.shadowRootClonable")}}.
+    The value defaults to `false`.
 
 ## Usage notes