@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
54 lines (49 loc) • 2.73 kB
HTML
<title>Custom Elements: create an element inside a template </title>
<link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<iframe id="iframe"></iframe>
<script>;
// A document`s browsing context only afffects the look up result of custom element definition
// https://html.spec.whatwg.org/#look-up-a-custom-element-definition
// There are two places where we need to look up a custom element definition:
// 1. creating an element
// https://dom.spec.whatwg.org/#concept-create-element
// 2. trying to upgrade an element
// https://html.spec.whatwg.org/#concept-try-upgrade
// The previous observation leads to the following behaviours:
// 1. an element in a document without browsing context should not be upgraded
// 2. a custom element cannot be created in a document without browsing context
// 3. an already "defined" custom element should remain "defined" after being inserted
// into a document without browsing context
test_with_window(w => {
let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
let element = doc_without_browsing_context.createElement('a-a');
w.customElements.define('a-a', class extends w.HTMLElement {});
doc_without_browsing_context.body.appendChild(element);
assert_true(element.matches(':not(:defined)'));
w.document.body.appendChild(element);
assert_true(element.matches(':defined'));
}, 'An element should not upgraded in a document without browsing context');
test_with_window(w => {
let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
w.customElements.define('b-b', class extends w.HTMLElement {});
let e1 = doc_without_browsing_context.createElement('b-b');
assert_true(e1.matches(':not(:defined)'));
let e2 = w.document.createElement('b-b');
assert_true(e2.matches(':defined'));
}, 'Custom element should not be created in a document without browsing context');
test_with_window(w => {
w.customElements.define('a-a', class extends w.HTMLElement {});
let element = w.document.createElement('a-a');
assert_true(element.matches(':defined'));
let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
doc_without_browsing_context.body.appendChild(element);
let inserted_element = doc_without_browsing_context.body.querySelector('a-a');
assert_true(inserted_element.matches(':defined'));
}, 'Inserting an already defined custom element into a document without browsing context ' +
'should not change its state');
</script>