Skip to content

Commit

Permalink
Add support for the shadow root clonable flag
Browse files Browse the repository at this point in the history
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.

Fixed: 1510466
Change-Id: Ie25b72f369ca0542555f91010b0f22d295403728
  • Loading branch information
mfreed7 authored and chromium-wpt-export-bot committed Jan 26, 2024
1 parent 35de43e commit e7143a3
Showing 1 changed file with 26 additions and 0 deletions.
26 changes: 26 additions & 0 deletions shadow-dom/declarative/clonable.window.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,29 @@ test(() => {
assert_equals(cloned.shadowRoot.children.length, 1, "children count");
assert_equals(cloned.shadowRoot.children[0].localName, "input", "children content");
}, "attachShadow with clonable: true");

for (clonable of [false, undefined]) {
test(() => {
const div = document.createElement("div");
const root = div.attachShadow({ mode: "open", clonable });
root.appendChild(document.createElement("input"));
assert_false(root.clonable, "clonable attribute");

const cloned = div.cloneNode(true);
assert_true(!cloned.shadowRoot, "shadow should not be cloned");
}, `attachShadow with clonable: ${clonable}`);
}

test(() => {
const div = document.createElement("div");
div.setHTMLUnsafe('<div><template shadowrootmode=open><input></template></div>');
const root = div.firstElementChild.shadowRoot;
assert_true(!!root);
assert_true(root.clonable, "clonable is automatically true for declarative shadow root");

const cloned = div.cloneNode(true);
const clonedRoot = cloned.firstElementChild.shadowRoot;
assert_true(!!clonedRoot);
assert_equals(clonedRoot.children.length, 1, "children count");
assert_equals(clonedRoot.children[0].localName, "input", "children content");
}, "declarative shadow roots get clonable: true automatically");

0 comments on commit e7143a3

Please sign in to comment.