diff --git a/resources/declarative-shadow-dom-polyfill.js b/resources/declarative-shadow-dom-polyfill.js
index 99a3e911eb63362..73643398a912820 100644
--- a/resources/declarative-shadow-dom-polyfill.js
+++ b/resources/declarative-shadow-dom-polyfill.js
@@ -17,7 +17,8 @@ function polyfill_declarative_shadow_dom(root) {
root.querySelectorAll("template[shadowrootmode]").forEach(template => {
const mode = template.getAttribute("shadowrootmode");
const delegatesFocus = template.hasAttribute("shadowrootdelegatesfocus");
- const shadowRoot = template.parentNode.attachShadow({ mode, delegatesFocus });
+ const clonable = template.hasAttribute("shadowrootclonable");
+ const shadowRoot = template.parentNode.attachShadow({ mode, delegatesFocus, clonable });
shadowRoot.appendChild(template.content);
template.remove();
polyfill_declarative_shadow_dom(shadowRoot);
diff --git a/shadow-dom/declarative/declarative-shadow-dom-basic.html b/shadow-dom/declarative/declarative-shadow-dom-basic.html
index 8799978804a53b4..8bc6bec5f50f741 100644
--- a/shadow-dom/declarative/declarative-shadow-dom-basic.html
+++ b/shadow-dom/declarative/declarative-shadow-dom-basic.html
@@ -141,6 +141,28 @@
assert_true(!!host.shadowRoot,"No shadow root found");
assert_false(host.shadowRoot.delegatesFocus,"delegatesFocus should be false without the shadowrootdelegatesfocus attribute");
}, 'Declarative Shadow DOM: delegates focus attribute');
+
+test(() => {
+ const div = document.createElement('div');
+ div.setHTMLUnsafe(`
+
+
+
+
+ `);
+ var host = div.querySelector('#host');
+ assert_true(!!host.shadowRoot,"No shadow root found");
+ assert_true(host.shadowRoot.clonable,"clonable should be true");
+ div.setHTMLUnsafe(`
+
+
+
+
+ `);
+ host = div.querySelector('#host');
+ assert_true(!!host.shadowRoot,"No shadow root found");
+ assert_false(host.shadowRoot.clonable,"clonable should be false without the shadowrootclonable attribute");
+}, 'Declarative Shadow DOM: clonable attribute');
@@ -168,7 +190,7 @@
- Content
+ Content
@@ -230,7 +252,7 @@
@@ -249,7 +271,7 @@
-
+
diff --git a/shadow-dom/declarative/declarative-shadow-dom-repeats.html b/shadow-dom/declarative/declarative-shadow-dom-repeats.html
index 5a992c6c69dd4bc..69f5c0f077afbc6 100644
--- a/shadow-dom/declarative/declarative-shadow-dom-repeats.html
+++ b/shadow-dom/declarative/declarative-shadow-dom-repeats.html
@@ -49,9 +49,9 @@
-
- Open, delegates focus (not the default),
- named slot assignment (the default), clonable (the default for declarative)
+
+ Open, delegates focus (not the default), clonable (not the default)
+ named slot assignment (the default)
@@ -66,11 +66,9 @@
assert_throws_dom("NotSupportedError",() => {
open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "manual", clonable: true});
},'Mismatched shadow root slotAssignment should throw');
- // See https://github.com/whatwg/html/issues/10107: the behavior of the
- // clonable flag is still being discussed.
- // assert_throws_dom("NotSupportedError",() => {
- // open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "named", clonable: false});
- // },'Mismatched shadow root clonable should throw');
+ assert_throws_dom("NotSupportedError",() => {
+ open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "named", clonable: false});
+ },'Mismatched shadow root clonable should throw');
const initialShadow = open2.shadowRoot;
const shadow = open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "named", clonable: true}); // Shouldn't throw
diff --git a/shadow-dom/declarative/gethtml.tentative.html b/shadow-dom/declarative/gethtml.tentative.html
index 564caaa97e8a1ae..c48230c17017cf6 100644
--- a/shadow-dom/declarative/gethtml.tentative.html
+++ b/shadow-dom/declarative/gethtml.tentative.html
@@ -9,7 +9,7 @@
@@ -70,8 +82,6 @@
assert_true(!!root);
const clone = template.content.cloneNode(true);
const clonedRoot = clone.querySelector('#host').shadowRoot;
- assert_true(!!clonedRoot);
- assert_equals(clonedRoot.children.length, 1, "children count");
- assert_equals(clonedRoot.children[0].localName, "input", "children content");
-}, "declarative shadow roots inside templates also get cloned automatically");
+ assert_true(!clonedRoot,'no shadow root gets cloned');
+}, "declarative shadow roots inside templates do *not* get cloned automatically");