<!DOCTYPE html> <meta charset="utf-8"> <title>customElements.upgrade()</title> <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-customelementregistry-upgrade"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> "use strict"; test(() => { const el = document.createElement("spider-man"); class SpiderMan extends HTMLElement {} customElements.define("spider-man", SpiderMan); assert_false(el instanceof SpiderMan, "The element must not yet be upgraded"); customElements.upgrade(el); assert_true(el instanceof SpiderMan, "The element must now be upgraded"); }, "Upgrading an element directly (example from the spec)"); test(() => { const el1 = document.createElement("element-a-1"); const el2 = document.createElement("element-a-2"); const container = document.createElement("div"); container.appendChild(el1); container.appendChild(el2); class Element1 extends HTMLElement {} class Element2 extends HTMLElement {} customElements.define("element-a-1", Element1); customElements.define("element-a-2", Element2); assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); customElements.upgrade(container); assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); }, "Two elements as children of the upgraded node"); test(() => { const el1 = document.createElement("element-b-1"); const el2 = document.createElement("element-b-2"); const container = document.createElement("div"); const subContainer = document.createElement("span"); const subSubContainer = document.createElement("span"); container.appendChild(subContainer); subContainer.appendChild(el1); subContainer.appendChild(subSubContainer); subSubContainer.appendChild(el2); class Element1 extends HTMLElement {} class Element2 extends HTMLElement {} customElements.define("element-b-1", Element1); customElements.define("element-b-2", Element2); assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); customElements.upgrade(container); assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); }, "Two elements as descendants of the upgraded node"); test(() => { const el1 = document.createElement("element-d-1"); const el2 = document.createElement("element-d-2"); const container = document.createElement("div"); const subContainer = document.createElement("span"); subContainer.attachShadow({ mode: "open" }); const subSubContainer = document.createElement("span"); subSubContainer.attachShadow({ mode: "open" }); container.appendChild(subContainer); subContainer.shadowRoot.appendChild(el1); subContainer.shadowRoot.appendChild(subSubContainer); subSubContainer.shadowRoot.appendChild(el2); class Element1 extends HTMLElement {} class Element2 extends HTMLElement {} customElements.define("element-d-1", Element1); customElements.define("element-d-2", Element2); assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); customElements.upgrade(container); assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); }, "Two elements as shadow-including descendants (and not descendants) of the upgraded node"); test(() => { const template = document.createElement("template"); template.innerHTML = ` <div> <element-c-1></element-c-1> <element-c-2> <element-c-3></element-c-3> <span> <element-c-4></element-c-4> </span> </element-c-2> </div> <element-c-5></element-c-5> `; // This code feels repetitive but I tried to make it use loops and it became harder to see the correctness. const el1 = template.content.querySelector("element-c-1"); const el2 = template.content.querySelector("element-c-2"); const el3 = template.content.querySelector("element-c-3"); const el4 = template.content.querySelector("element-c-4"); const el5 = template.content.querySelector("element-c-5"); class Element1 extends HTMLElement {} class Element2 extends HTMLElement {} class Element3 extends HTMLElement {} class Element4 extends HTMLElement {} class Element5 extends HTMLElement {} customElements.define("element-c-1", Element1); customElements.define("element-c-2", Element2); customElements.define("element-c-3", Element3); customElements.define("element-c-4", Element4); customElements.define("element-c-5", Element5); assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded"); assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded"); assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded"); customElements.upgrade(template); assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded despite upgrading the template"); assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded despite upgrading the template"); assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded despite upgrading the template"); assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded despite upgrading the template"); assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded despite upgrading the template"); customElements.upgrade(template.content); // Template contents owner documents don't have a browsing context, so // https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition does not find any // custom element definition. assert_false(el1 instanceof Element1, "element 1 must still not be upgraded after upgrading the template contents"); assert_false(el2 instanceof Element2, "element 2 must still not be upgraded after upgrading the template contents"); assert_false(el3 instanceof Element3, "element 3 must still not be upgraded after upgrading the template contents"); assert_false(el4 instanceof Element4, "element 4 must still not be upgraded after upgrading the template contents"); assert_false(el5 instanceof Element5, "element 5 must still not be upgraded after upgrading the template contents"); }, "Elements inside a template contents DocumentFragment node"); </script>