Skip to content

Commit

Permalink
DOM: rename importNode()'s deep to selfOnly (and invert its value)
Browse files Browse the repository at this point in the history 
Part of whatwg/dom#1341.
  • Loading branch information
@annevk
annevk committed Feb 22, 2025
1 parent f33579b commit 5bcf44c
Showing 1 changed file with 54 additions and 7 deletions.
61 changes: 54 additions & 7 deletions custom-elements/revamped-scoped-registry/Document-importNode.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
</template>
</some-element>
</template>
<div id="root">
<span></span>
</div>
<script>

const scopedRegistry = new CustomElementRegistry();
Expand Down Expand Up @@ -54,7 +57,7 @@
}, 'importNode should clone using the specified scoped regsitry');

test(() => {
const clone = document.importNode(host, {deep: true, customElements: scopedRegistry});
const clone = document.importNode(host, {selfOnly: false, customElements: scopedRegistry});
assert_equals(clone.shadowRoot.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');
assert_false(clone.shadowRoot.querySelector('some-element') instanceof GlobalSomeElement);
assert_false(clone.shadowRoot.querySelector('some-element') instanceof ScopedSomeElement);
Expand All @@ -63,14 +66,14 @@
}, 'importNode should preserve null-ness of custom element registry');

test(() => {
const clone = document.importNode(host.shadowRoot.querySelector('div'), {deep: true});
const clone = document.importNode(host.shadowRoot.querySelector('div'), {selfOnly: false});
assert_equals(clone.customElements, window.customElements);
assert_true(clone.querySelector('some-element') instanceof GlobalSomeElement);
assert_true(clone.querySelector('other-element') instanceof GlobalOtherElement);
}, 'importNode should clone a shadow host with a declarative shadow DOM using the global registry by default');

test(() => {
const clone = document.importNode(host.shadowRoot.querySelector('div'), {deep: true, customElements: scopedRegistry});
const clone = document.importNode(host.shadowRoot.querySelector('div'), {selfOnly: false, customElements: scopedRegistry});
assert_equals(clone.customElements, scopedRegistry);
assert_true(clone.querySelector('some-element') instanceof ScopedSomeElement);
assert_false(clone.querySelector('other-element') instanceof GlobalOtherElement);
Expand All @@ -79,7 +82,7 @@
test(() => {
const element = document.createElement('div', {customElements: emptyRegistry});
element.innerHTML = '<some-element></some-element><other-element></other-element>';
const clone = document.importNode(element, {deep: true, customElements: scopedRegistry});
const clone = document.importNode(element, {selfOnly: false, customElements: scopedRegistry});
assert_equals(clone.customElements, scopedRegistry);
assert_true(clone.querySelector('some-element') instanceof ScopedSomeElement);
assert_false(clone.querySelector('other-element') instanceof GlobalOtherElement);
Expand All @@ -90,7 +93,7 @@
template.innerHTML = '<div><some-element>hello</some-element><other-element>world</other-element></div>';
assert_equals(template.content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');
assert_equals(template.content.querySelector('other-element').__proto__.constructor.name, 'HTMLElement');
const clone = document.importNode(template.content, {deep: true});
const clone = document.importNode(template.content, {selfOnly: false});
assert_equals(clone.querySelector('some-element').customElements, window.customElements);
assert_equals(clone.querySelector('some-element').__proto__.constructor.name, 'GlobalSomeElement');
assert_equals(clone.querySelector('other-element').__proto__.constructor.name, 'GlobalOtherElement');
Expand All @@ -101,7 +104,7 @@
template.innerHTML = '<div><some-element>hello</some-element><other-element>world</other-element></div>';
assert_equals(template.content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');
assert_equals(template.content.querySelector('other-element').__proto__.constructor.name, 'HTMLElement');
const clone = document.importNode(template.content, {deep: true, customElements: scopedRegistry});
const clone = document.importNode(template.content, {selfOnly: false, customElements: scopedRegistry});
assert_equals(clone.querySelector('some-element').customElements, scopedRegistry);
assert_equals(clone.querySelector('some-element').__proto__.constructor.name, 'ScopedSomeElement');
assert_equals(clone.querySelector('other-element').__proto__.constructor.name, 'HTMLElement');
Expand All @@ -124,14 +127,58 @@
</div>`;
assert_equals(template.content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement');
assert_equals(template.content.querySelector('other-element').__proto__.constructor.name, 'HTMLElement');
const clone = document.importNode(template.content, {deep: true});
const clone = document.importNode(template.content, {selfOnly: false});
assert_equals(clone.querySelector('some-element').customElements, window.customElements);
assert_equals(clone.querySelector('some-element').__proto__.constructor.name, 'GlobalSomeElement');
const otherElementInTemplate = clone.querySelector('template').content.querySelector('other-element');
assert_equals(otherElementInTemplate.__proto__.constructor.name, 'HTMLElement');
assert_equals(clone.querySelector('other-element').__proto__.constructor.name, 'GlobalOtherElement');
}, 'importNode should clone a template content with a nested template element using a scoped registry');

test(() => {
const clone = document.importNode(root);
assert_false(clone.hasChildNodes());
}, "importNode: don't pass options argument");

test(() => {
const clone = document.importNode(root, false);
assert_false(clone.hasChildNodes());
}, "importNode: pass options argument with value false");

test(() => {
const clone = document.importNode(root, true);
assert_true(clone.hasChildNodes());
}, "importNode: pass options argument with value true");

test(() => {
const clone = document.importNode(root, undefined);
assert_false(clone.hasChildNodes());
}, "importNode: pass options argument with value undefined");

test(() => {
const clone = document.importNode(root, { });
assert_true(clone.hasChildNodes());
}, "importNode: pass options argument with value { }");

test(() => {
const clone = document.importNode(root, { selfOnly: false });
assert_true(clone.hasChildNodes());
}, "importNode: pass options argument with value { selfOnly: false }");

test(() => {
const clone = document.importNode(root, { selfOnly: true });
assert_false(clone.hasChildNodes());
}, "importNode: pass options argument with value { selfOnly: true }");

test(() => {
const clone = document.importNode(root, { customElements: scopedRegistry });
assert_true(clone.hasChildNodes());
}, "importNode: pass options argument with value { customElements: scopedRegistry }");

test(() => {
assert_throws_js(TypeError, () => document.importNode(root, { customElements: null }));
}, "importNode: pass options argument with value { customElements: null }");

</script>
</body>
</html>

0 comments on commit 5bcf44c

Please sign in to comment.