CustomElementRegistry-initialize.html (6880B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 5 <link rel="help" href="https://github.com/whatwg/html/issues/10854"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <div id="host"> 11 <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry> 12 <a-b> 13 <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry> 14 <c-d/><c-d> 15 </template> 16 </a-b> 17 <ef></ef> 18 </template> 19 </div> 20 <div id="host-with-registry"> 21 <template shadowrootmode="open" shadowrootclonable="true"> 22 <a-b></a-b> 23 <ef></ef> 24 </template> 25 </div> 26 <script> 27 28 test(() => { 29 assert_equals(typeof(window.customElements.initialize), 'function'); 30 assert_equals(typeof((new CustomElementRegistry).initialize), 'function'); 31 }, 'initialize is a function on both global and scoped CustomElementRegistry'); 32 33 test(() => { 34 const clone = host.cloneNode(true); 35 const shadowRoot = clone.shadowRoot; 36 assert_equals(shadowRoot.customElementRegistry, null); 37 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, null); 38 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, null); 39 window.customElements.initialize(shadowRoot); 40 assert_equals(shadowRoot.customElementRegistry, window.customElements); 41 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, window.customElements); 42 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, window.customElements); 43 }, 'initialize sets element.customElementRegistry to the global registry'); 44 45 test(() => { 46 const clone = host.cloneNode(true); 47 const shadowRoot = clone.shadowRoot; 48 assert_equals(shadowRoot.customElementRegistry, null); 49 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, null); 50 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, null); 51 window.customElements.initialize(shadowRoot); 52 assert_equals(shadowRoot.customElementRegistry, window.customElements); 53 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, window.customElements); 54 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, window.customElements); 55 assert_equals(shadowRoot.querySelector('a-b').shadowRoot.customElementRegistry, null); 56 assert_equals(shadowRoot.querySelector('a-b').shadowRoot.querySelector('c-d').customElementRegistry, null); 57 }, 'initialize does not set the registry of nested shadow tree to the global registry'); 58 59 60 test(() => { 61 const clone = host.cloneNode(true); 62 const shadowRoot = clone.shadowRoot; 63 assert_equals(shadowRoot.customElementRegistry, null); 64 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, null); 65 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, null); 66 const registry = new CustomElementRegistry; 67 registry.initialize(shadowRoot); 68 assert_equals(shadowRoot.customElementRegistry, registry); 69 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, registry); 70 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, registry); 71 }, 'initialize sets element.customElementRegistry to a scoped registry'); 72 73 test(() => { 74 const clone = host.cloneNode(true); 75 const shadowRoot = clone.shadowRoot; 76 assert_equals(shadowRoot.customElementRegistry, null); 77 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, null); 78 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, null); 79 const registry = new CustomElementRegistry; 80 registry.initialize(shadowRoot); 81 assert_equals(shadowRoot.customElementRegistry, registry); 82 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, registry); 83 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, registry); 84 assert_equals(shadowRoot.querySelector('a-b').shadowRoot.customElementRegistry, null); 85 assert_equals(shadowRoot.querySelector('a-b').shadowRoot.querySelector('c-d').customElementRegistry, null); 86 }, 'initialize does not set the registry of nested shadow tree to a scoped registry'); 87 88 test(() => { 89 const clone = host.cloneNode(true); 90 const shadowRoot = clone.shadowRoot; 91 assert_equals(shadowRoot.customElementRegistry, null); 92 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, null); 93 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, null); 94 const registry = new CustomElementRegistry; 95 registry.initialize(shadowRoot); 96 assert_equals(shadowRoot.customElementRegistry, registry); 97 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, registry); 98 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, registry); 99 document.body.appendChild(clone); 100 assert_equals(shadowRoot.customElementRegistry, registry); 101 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, registry); 102 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, registry); 103 }, 'initialize sets element.customElementRegistry permantently'); 104 105 test(() => { 106 const clone = document.getElementById('host-with-registry').cloneNode(true); 107 const shadowRoot = clone.shadowRoot; 108 assert_equals(shadowRoot.customElementRegistry, window.customElements); 109 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, window.customElements); 110 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, window.customElements); 111 const registry = new CustomElementRegistry; 112 registry.initialize(shadowRoot); 113 assert_equals(shadowRoot.customElementRegistry, window.customElements); 114 assert_equals(shadowRoot.querySelector('a-b').customElementRegistry, window.customElements); 115 assert_equals(shadowRoot.querySelector('ef').customElementRegistry, window.customElements); 116 }, 'initialize is no-op on a subtree with a non-null registry'); 117 118 test(() => { 119 const doc = new Document(); 120 assert_equals(doc.customElementRegistry, null); 121 const registry = new CustomElementRegistry(); 122 registry.initialize(doc); 123 assert_equals(doc.customElementRegistry, registry); 124 }, 'initialize works on Document'); 125 126 test(() => { 127 const doc = new Document(); 128 const df = doc.createDocumentFragment(); 129 const dummy = doc.createElement("dummy"); 130 df.append(dummy); 131 assert_equals(dummy.customElementRegistry, null); 132 assert_equals(df.customElementRegistry, undefined); 133 const registry = new CustomElementRegistry(); 134 registry.initialize(df); 135 assert_equals(dummy.customElementRegistry, registry); 136 assert_equals(df.customElementRegistry, undefined); 137 }, 'initialize works on DocumentFragment'); 138 139 </script> 140 </body> 141 </html>