Add shadowrootclonable attribute

And make declarative shadow roots not clonable by default.

Closes #10107.

Co-authored-by: Anne van Kesteren <annevk@annevk.nl>

Author: mfreed7

source

@@ -3131,7 +3131,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
@@ -63166,6 +63166,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>
@@ -63179,6 +63180,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>
@@ -63219,6 +63221,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>
 
@@ -63360,6 +63366,10 @@ 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,17 +126140,20 @@ document.body.appendChild(text);
      <li><p>Let <var>template</var> be the result of <span>insert a foreign element</span>
      for <var>template start tag</var>, with <span>HTML namespace</span> and true.</p></li>
 
-     <li><p>Let <var>declarative shadow mode</var> be <var>template start tag</var>'s
-     <code data-x="attr-template-shadowrootmode">shadowrootmode</code> attribute.</p></li>
+     <li><p>Let <var>mode</var> be <var>template start tag</var>'s <code
+     data-x="attr-template-shadowrootmode">shadowrootmode</code> attribute's value.</p></li>
+
+     <li><p>Let <var>clonable</var> be true if <var>template start tag</var> has a <code
+     data-x="attr-template-shadowrootclonable">shadowrootclonable</code> attribute; otherwise
+     false.</p></li>
 
-     <li><p>If <var>template start tag</var> had a
-     <code data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code>
-     attribute, then let <var>declarative shadow delegates focus</var> be true. Otherwise let
-     it be false.</p></li>
+     <li><p>Let <var>delegatesFocus</var> be true if <var>template start tag</var> has a <code
+     data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code> attribute;
+     otherwise 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>mode</var>, <var>clonable</var>,
+     <var>delegatesFocus</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
@@ -139043,10 +139056,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>