@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
80 lines (71 loc) • 3 kB
HTML
<title>Custom Elements: Create an element when definition is non-null and synchronous flag not set</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>;
// Create an element
// https://dom.spec.whatwg.org/#concept-create-element
// 6. If definition is non-null, then:
// 6.2. If the synchronous custom elements flag is not set:
(() => {
// customElements.define() upgrades existing elements
// with synchronous flag unset.
test_with_window(w => {
create_element_and_upgrade(w);
}, 'define() should upgrade existing elements');
function create_element_and_upgrade(w) {
let document = w.document;
let element = document.createElement('a-a');
document.body.appendChild(element);
assert_false('is_custom_constructed' in element, 'Constructor should not run before define()');
define(w);
assert_true(element.is_custom_constructed, 'Constructor should run after define()');
return element;
}
function define(w) {
w.customElements.define('a-a', class extends w.HTMLElement {
constructor() { super(); this.is_custom_constructed = true; }
});
}
// The "clone a node" concept is async.
// https://dom.spec.whatwg.org/#concept-node-clone
test_with_window(w => {
let element = create_element_and_upgrade(w);
let clone = element.cloneNode();
assert_true(clone.is_custom_constructed);
}, 'cloneNode() should run custom constructor');
// importNode() uses the same "clone a node" conecpt to clone the node.
test_with_window(w => {
define(w);
let document = w.document;
let another_document = document.implementation.createHTMLDocument();
let element_in_another_document = another_document.createElement('a-a');
let imported = document.importNode(element_in_another_document);
assert_true(imported.is_custom_constructed);
}, 'importNode() should run custom constructor');
// innerHTML/outerHTML setters use the fragment parser.
// https://w3c.github.io/DOM-Parsing/#dom-element-innerhtml
// Synchronous flag is unset if HTML fragment parsing algorithm.
// https://html.spec.whatwg.org/multipage/syntax.html#create-an-element-for-the-token
test_with_window(w => {
define(w);
let document = w.document;
let fragment = document.createElement('div');
document.body.appendChild(fragment);
fragment.innerHTML = '<a-a></a-a>';
assert_true(fragment.children[0].is_custom_constructed);
}, 'innerHTML setter should run custom constructor');
test_with_window(w => {
define(w);
let document = w.document;
let fragment = document.createElement('div');
document.body.appendChild(fragment);
fragment.outerHTML = '<a-a></a-a>';
assert_true(document.body.children[0].is_custom_constructed);
}, 'outerHTML setter should run custom constructor');
})();
</script>
</body>