Skip to content

Commit 12c3cce

Browse files
mfreed7chromium-wpt-export-bot
mfreed7
authored and
chromium-wpt-export-bot
committed
Add support for the shadow root clonable flag
This landed in the latest declarative shadow dom spec PR: whatwg/dom#892 and was discussed here: whatwg/dom#1137 This CL adds support for that, behind a new ShadowRootClonable flag. There was already a very basic test, but I added a few more cases. This should be fairly web compatible, but there is a risk since with this feature enabled, declarative shadow roots in the main document (as opposed to in a <template> element) will now be cloned. I will launch this feature carefully. Safari has already shipped, and Gecko has implemented this and plans to ship soon. Fixed: 1510466 Change-Id: Ie25b72f369ca0542555f91010b0f22d295403728
1 parent a4ac920 commit 12c3cce

File tree

2 files changed

+47
-10
lines changed

2 files changed

+47
-10
lines changed

‎shadow-dom/declarative/clonable.window.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎shadow-dom/shadow-root-clonable.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<title>Shadow root clonable flag</title>
3+
<link rel='author' href='mailto:krosylight@mozilla.com'>
4+
<link rel='author' href='mailto:masonf@chromium.org'>
5+
<link rel='help' href='https://dom.spec.whatwg.org/#shadowroot-clonable'>
6+
<script src='/resources/testharness.js'></script>
7+
<script src='/resources/testharnessreport.js'></script>
8+
9+
<body>
10+
<script>
11+
test(() => {
12+
const div = document.createElement("div");
13+
const root = div.attachShadow({ mode: "open", clonable: true });
14+
root.appendChild(document.createElement("input"));
15+
assert_true(root.clonable, "clonable attribute");
16+
17+
const cloned = div.cloneNode(true);
18+
assert_equals(cloned.shadowRoot.children.length, 1, "children count");
19+
assert_equals(cloned.shadowRoot.children[0].localName, "input", "children content");
20+
}, "attachShadow with clonable: true");
21+
22+
for (clonable of [false, undefined]) {
23+
test(() => {
24+
const div = document.createElement("div");
25+
const root = div.attachShadow({ mode: "open", clonable });
26+
root.appendChild(document.createElement("input"));
27+
assert_false(root.clonable, "clonable attribute");
28+
29+
const cloned = div.cloneNode(true);
30+
assert_true(!cloned.shadowRoot, "shadow should not be cloned");
31+
}, `attachShadow with clonable: ${clonable}`);
32+
}
33+
34+
test(() => {
35+
const div = document.createElement("div");
36+
div.setHTMLUnsafe('<div><template shadowrootmode=open><input></template></div>');
37+
const root = div.firstElementChild.shadowRoot;
38+
assert_true(!!root);
39+
assert_true(root.clonable, "clonable is automatically true for declarative shadow root");
40+
41+
const cloned = div.cloneNode(true);
42+
const clonedRoot = cloned.firstElementChild.shadowRoot;
43+
assert_true(!!clonedRoot);
44+
assert_equals(clonedRoot.children.length, 1, "children count");
45+
assert_equals(clonedRoot.children[0].localName, "input", "children content");
46+
}, "declarative shadow roots get clonable: true automatically");
47+
</script>

0 commit comments

Comments
 (0)