Element-customElementRegistry.html (4506B)
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-window"><template shadowrootmode="open" shadowrootclonable="true"><a-b></a-b></template></div> 11 <div id="host-null"><template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry=""><a-b></a-b></template></div> 12 <script> 13 14 test(() => { 15 assert_equals(document.createElement('div').customElementRegistry, window.customElements); 16 }, 'customElementRegistry on a newly constrcuted element should return window.customElements by default'); 17 18 test(() => { 19 const sr = document.getElementById('host-window').shadowRoot; 20 const ab = sr.querySelector('a-b'); 21 assert_equals(sr.customElementRegistry, window.customElements); 22 assert_equals(ab.customElementRegistry, window.customElements); 23 }, 'customElementRegistry on an element inside a declarative shadow DOM should return window.customElements by default'); 24 25 test(() => { 26 const sr = document.getElementById('host-null').shadowRoot; 27 const ab = sr.querySelector('a-b'); 28 assert_equals(sr.customElementRegistry, null); 29 assert_equals(ab.customElementRegistry, null); 30 }, 'customElementRegistry on an element inside a declarative shadow DOM with shadowrootcustomelementregistry should return null'); 31 32 test(() => { 33 const clone = document.getElementById('host-null').cloneNode(true); 34 const sr = clone.shadowRoot; 35 const ab = sr.querySelector('a-b'); 36 assert_equals(sr.customElementRegistry, null); 37 assert_equals(ab.customElementRegistry, null); 38 }, 'customElementRegistry on a clone of a declarative shadow tree with shadowrootcustomelementregistry should return null'); 39 40 test((t) => { 41 const clone = document.getElementById('host-null').cloneNode(true); 42 const ab = clone.shadowRoot.querySelector('a-b'); 43 document.body.appendChild(ab); 44 assert_equals(ab.customElementRegistry, null); 45 46 const frame = document.createElement('iframe'); 47 t.add_cleanup(() => frame.remove()); 48 document.body.appendChild(frame); 49 frame.contentDocument.body.append(ab); 50 assert_equals(ab.customElementRegistry, frame.contentWindow.customElements); 51 52 }, 'customElementRegistry on a clone of a declarative shadow tree with shadowrootcustomelementregistry should return the global registry after getting inserted into a document'); 53 54 test(() => { 55 const sr = document.getElementById('host-null').shadowRoot; 56 const ab = sr.querySelector('a-b'); 57 const registry = new CustomElementRegistry; 58 registry.initialize(sr); 59 assert_equals(sr.customElementRegistry, registry); 60 assert_equals(ab.customElementRegistry, registry); 61 }, 'customElementRegistry on an element inside a declarative shadow DOM with shadowrootcustomelementregistry should return the scoped registry after calling initialize'); 62 63 test(() => { 64 const registry = new CustomElementRegistry; 65 element = document.createElement('div', {customElementRegistry: registry}); 66 assert_equals(element.customElementRegistry, registry); 67 }, 'customElementRegistry on a builtin element created by calling createElement on CustomElementRegistry should return the registry'); 68 69 test(() => { 70 const registry = new CustomElementRegistry; 71 element = document.createElement('non-existent', {customElementRegistry: registry}); 72 assert_equals(element.customElementRegistry, registry); 73 }, 'customElementRegistry on an upgarde candidate created by calling createElement on CustomElementRegistry should return the registry'); 74 75 test(() => { 76 const registry = new CustomElementRegistry; 77 element = document.createElement('nonexistent', {customElementRegistry: registry}); 78 assert_equals(element.customElementRegistry, registry); 79 }, 'customElementRegistry on an unknown element created by calling createElement on CustomElementRegistry should return the registry'); 80 81 test(() => { 82 const registry = new CustomElementRegistry; 83 registry.define('custom-element', class extends HTMLElement { }) 84 element = document.createElement('custom-element', {customElementRegistry: registry}); 85 assert_equals(element.customElementRegistry, registry); 86 }, 'customElementRegistry on a defined custom element created by calling createElement on CustomElementRegistry should return the registry'); 87 88 </script> 89 </body> 90 </html>