Add shadowrootclonable and make declarative shadow roots not `clona…

…ble` by default

- [ ] At least two implementers are interested (and none opposed):
   * Chromium
   * [WebKit](whatwg#10107 (comment))
   * [Gecko](whatwg#10107 (comment))
- [X] [Tests](https://github.com/web-platform-tests/wpt) are written and can be reviewed and commented upon at:
   * https://wpt.fyi/results/shadow-dom/shadow-root-clonable.html
- [X] [Implementation bugs](https://github.com/whatwg/meta/blob/main/MAINTAINERS.md#handling-pull-requests) are filed:
   * Chromium: https://crbug.com/1510466
   * Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1868428
   * WebKit: https://bugs.webkit.org/show_bug.cgi?id=266227
- [ ] [MDN issue](https://github.com/whatwg/meta/blob/main/MAINTAINERS.md#handling-pull-requests) is filed: …
- [X] The top of this comment includes a [clear commit message](https://github.com/whatwg/meta/blob/main/COMMITTING.md) to use.

(See [WHATWG Working Mode: Changes](https://whatwg.org/working-mode#changes) for more details.)

@annevk @emilio

source

@@ -3135,7 +3135,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-document">node document</dfn> concept</li>
      <li><dfn data-x="concept-document-type" data-x-href="https://dom.spec.whatwg.org/#concept-document-type">document type</dfn> concept</li>
      <li><dfn data-x="concept-DocumentFragment-host" data-x-href="https://dom.spec.whatwg.org/#concept-documentfragment-host">host</dfn> concept</li>
-     <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept, and its <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-delegates-focus">delegates focus</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-available-to-element-internals">available to element internals</dfn>.</li>
+     <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept, and its <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-delegates-focus">delegates focus</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-available-to-element-internals">available to element internals</dfn>, and  <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-clonable">clonable</dfn>.</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#element-shadow-host">shadow host</dfn> concept</li>
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-htmlcollection"><code>HTMLCollection</code></dfn> interface, its
          <dfn data-x="dom-HTMLCollection-length" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-length"><code>length</code></dfn> attribute, and its
@@ -63197,6 +63197,7 @@ not-slash     = %x0000-002E / %x0030-10FFFF
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-template-shadowrootmode">shadowrootmode</code></dd>
    <dd><code data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code></dd>
+   <dd><code data-x="attr-template-shadowrootclonable">shadowrootclonable</code></dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
    <dd><a href="https://w3c.github.io/html-aria/#el-template">For authors</a>.</dd>
@@ -63210,6 +63211,7 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
   readonly attribute <span>DocumentFragment</span> <span data-x="dom-template-content">content</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-template-shadowrootmode">shadowRootMode</span>;
   [<span>CEReactions</span>] attribute boolean <span data-x="dom-template-shadowrootdelegatesfocus">shadowRootDelegatesFocus</span>;
+  [<span>CEReactions</span>] attribute boolean <span data-x="dom-template-shadowrootclonable">shadowRootClonable</span>;
 };</code></pre>
 </dd>
    <dd w-dev>Uses <code>HTMLTemplateElement</code>.</dd>
@@ -63250,6 +63252,10 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
   data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code></dfn> content
   attribute is a <span>boolean attribute</span>.</p>
 
+  <p>The <dfn element-attr for="template"><code
+  data-x="attr-template-shadowrootclonable">shadowrootclonable</code></dfn> content
+  attribute is a <span>boolean attribute</span>.</p>
+
   <p>The <span>template contents</span> of a <code>template</code> element <a
   href="#template-syntax">are not children of the element itself</a>.</p>
 
@@ -63391,6 +63397,12 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
   data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code> content
   attribute.</p>
 
+  <p>The <dfn><code
+  data-x="dom-template-shadowrootclonable">shadowRootClonable</code></dfn> IDL attribute
+  must <span>reflect</span> the <code
+  data-x="attr-template-shadowrootclonable">shadowrootclonable</code> content
+  attribute.</p>
+
   <hr>
 
   <p>The <span data-x="concept-node-clone-ext">cloning steps</span> for a <code>template</code>
@@ -126130,9 +126142,14 @@ document.body.appendChild(text);
      attribute, then let <var>declarative shadow delegates focus</var> be true. Otherwise let
      it be false.</p></li>
 
+     <li><p>If <var>template start tag</var> had a
+     <code data-x="attr-template-shadowrootclonable">shadowrootclonable</code>
+     attribute, then let <var>clonable</var> be true. Otherwise let it be false.</p></li>
+
      <li><p><span data-x="concept-attach-a-shadow-root">Attach a shadow root</span> with
-     <var>declarative shadow host element</var>, <var>declarative shadow mode</var>, true,
-     <var>declarative shadow delegates focus</var>, and "<code data-x="">named</code>".</p></li>
+     <var>declarative shadow host element</var>, <var>declarative shadow mode</var>,
+     <var>clonable>, <var>declarative shadow delegates focus</var>, and
+     "<code data-x="">named</code>".</p></li>
 
      <li>
       <p>If an exception was thrown by <span data-x="concept-attach-a-shadow-root">attach a
@@ -138966,10 +138983,15 @@ interface <dfn interface>External</dfn> {
      <td> "<code data-x="">open</code>";
           "<code data-x="">closed</code>"
     <tr>
-      <th> <code data-x="">shadowrootdelegatesfocus</code>
-      <td> <code data-x="attr-template-shadowrootdelegatesfocus">template</code>
-      <td> Sets <span>delegates focus</span> on a declarative shadow root
-      <td> <span>Boolean attribute</span>
+     <th> <code data-x="">shadowrootdelegatesfocus</code>
+     <td> <code data-x="attr-template-shadowrootdelegatesfocus">template</code>
+     <td> Sets <span>delegates focus</span> on a declarative shadow root
+     <td> <span>Boolean attribute</span>
+    <tr>
+     <th> <code data-x="">shadowrootclonable</code>
+     <td> <code data-x="attr-template-shadowrootclonable">template</code>
+     <td> Sets <span>clonable</span> on a declarative shadow root
+     <td> <span>Boolean attribute</span>
     <tr>
      <th> <code data-x="">shape</code>
      <td> <code data-x="attr-area-shape">area</code>