upgrade.html (6932B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>customElements.upgrade()</title> 4 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-customelementregistry-upgrade"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <script> 11 "use strict"; 12 13 test(() => { 14 const el = document.createElement("spider-man"); 15 16 class SpiderMan extends HTMLElement {} 17 customElements.define("spider-man", SpiderMan); 18 19 assert_false(el instanceof SpiderMan, "The element must not yet be upgraded"); 20 21 customElements.upgrade(el); 22 assert_true(el instanceof SpiderMan, "The element must now be upgraded"); 23 }, "Upgrading an element directly (example from the spec)"); 24 25 test(() => { 26 const el1 = document.createElement("element-a-1"); 27 const el2 = document.createElement("element-a-2"); 28 const container = document.createElement("div"); 29 container.appendChild(el1); 30 container.appendChild(el2); 31 32 class Element1 extends HTMLElement {} 33 class Element2 extends HTMLElement {} 34 customElements.define("element-a-1", Element1); 35 customElements.define("element-a-2", Element2); 36 37 assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); 38 assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); 39 40 customElements.upgrade(container); 41 assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); 42 assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); 43 }, "Two elements as children of the upgraded node"); 44 45 test(() => { 46 const el1 = document.createElement("element-b-1"); 47 const el2 = document.createElement("element-b-2"); 48 const container = document.createElement("div"); 49 const subContainer = document.createElement("span"); 50 const subSubContainer = document.createElement("span"); 51 container.appendChild(subContainer); 52 subContainer.appendChild(el1); 53 subContainer.appendChild(subSubContainer); 54 subSubContainer.appendChild(el2); 55 56 class Element1 extends HTMLElement {} 57 class Element2 extends HTMLElement {} 58 customElements.define("element-b-1", Element1); 59 customElements.define("element-b-2", Element2); 60 61 assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); 62 assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); 63 64 customElements.upgrade(container); 65 assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); 66 assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); 67 }, "Two elements as descendants of the upgraded node"); 68 69 test(() => { 70 const el1 = document.createElement("element-d-1"); 71 const el2 = document.createElement("element-d-2"); 72 73 const container = document.createElement("div"); 74 const subContainer = document.createElement("span"); 75 subContainer.attachShadow({ mode: "open" }); 76 const subSubContainer = document.createElement("span"); 77 subSubContainer.attachShadow({ mode: "open" }); 78 79 container.appendChild(subContainer); 80 subContainer.shadowRoot.appendChild(el1); 81 subContainer.shadowRoot.appendChild(subSubContainer); 82 subSubContainer.shadowRoot.appendChild(el2); 83 84 class Element1 extends HTMLElement {} 85 class Element2 extends HTMLElement {} 86 customElements.define("element-d-1", Element1); 87 customElements.define("element-d-2", Element2); 88 89 assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); 90 assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); 91 92 customElements.upgrade(container); 93 assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); 94 assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); 95 }, "Two elements as shadow-including descendants (and not descendants) of the upgraded node"); 96 97 test(() => { 98 const template = document.createElement("template"); 99 template.innerHTML = ` 100 <div> 101 <element-c-1></element-c-1> 102 <element-c-2> 103 <element-c-3></element-c-3> 104 <span> 105 <element-c-4></element-c-4> 106 </span> 107 </element-c-2> 108 </div> 109 <element-c-5></element-c-5> 110 `; 111 112 // This code feels repetitive but I tried to make it use loops and it became harder to see the correctness. 113 114 const el1 = template.content.querySelector("element-c-1"); 115 const el2 = template.content.querySelector("element-c-2"); 116 const el3 = template.content.querySelector("element-c-3"); 117 const el4 = template.content.querySelector("element-c-4"); 118 const el5 = template.content.querySelector("element-c-5"); 119 120 class Element1 extends HTMLElement {} 121 class Element2 extends HTMLElement {} 122 class Element3 extends HTMLElement {} 123 class Element4 extends HTMLElement {} 124 class Element5 extends HTMLElement {} 125 126 customElements.define("element-c-1", Element1); 127 customElements.define("element-c-2", Element2); 128 customElements.define("element-c-3", Element3); 129 customElements.define("element-c-4", Element4); 130 customElements.define("element-c-5", Element5); 131 132 assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); 133 assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); 134 assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded"); 135 assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded"); 136 assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded"); 137 138 customElements.upgrade(template); 139 140 assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded despite upgrading the template"); 141 assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded despite upgrading the template"); 142 assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded despite upgrading the template"); 143 assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded despite upgrading the template"); 144 assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded despite upgrading the template"); 145 146 customElements.upgrade(template.content); 147 148 // Template contents owner documents don't have a browsing context, so 149 // https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition does not find any 150 // custom element definition. 151 assert_false(el1 instanceof Element1, "element 1 must still not be upgraded after upgrading the template contents"); 152 assert_false(el2 instanceof Element2, "element 2 must still not be upgraded after upgrading the template contents"); 153 assert_false(el3 instanceof Element3, "element 3 must still not be upgraded after upgrading the template contents"); 154 assert_false(el4 instanceof Element4, "element 4 must still not be upgraded after upgrading the template contents"); 155 assert_false(el5 instanceof Element5, "element 5 must still not be upgraded after upgrading the template contents"); 156 }, "Elements inside a template contents DocumentFragment node"); 157 </script>