ShadowRoot-innerHTML.html (3747B)
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 <script> 11 12 function createConnectedShadowTree(test, customElementRegistry) { 13 const host = document.createElement('div'); 14 const shadowRoot = host.attachShadow({mode: 'closed', customElementRegistry}); 15 document.body.appendChild(host); 16 test.add_cleanup(() => host.remove()); 17 return shadowRoot; 18 } 19 20 test((test) => { 21 const registry = new CustomElementRegistry; 22 23 class SomeElement extends HTMLElement { }; 24 registry.define('some-element', SomeElement); 25 26 class OtherElement extends HTMLElement { }; 27 registry.define('other-element', OtherElement); 28 29 const shadowRoot = createConnectedShadowTree(test, registry); 30 assert_true(document.createElement('some-element', {customElementRegistry: registry}) instanceof SomeElement); 31 assert_true(document.createElement('other-element', {customElementRegistry: registry}) instanceof OtherElement); 32 shadowRoot.innerHTML = '<some-element></some-element><other-element></other-element>'; 33 34 assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement); 35 assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry); 36 assert_true(shadowRoot.querySelector('other-element') instanceof OtherElement); 37 assert_equals(shadowRoot.querySelector('other-element').customElementRegistry, registry); 38 }, 'innerHTML on a shadow root should use the scoped registry'); 39 40 test((test) => { 41 class SomeElement1 extends HTMLElement { }; 42 customElements.define('some-element', SomeElement1); 43 44 const registry = new CustomElementRegistry; 45 class SomeElement2 extends HTMLElement { }; 46 registry.define('some-element', SomeElement2); 47 48 const shadowRoot = createConnectedShadowTree(test, registry); 49 shadowRoot.innerHTML = '<some-element></some-element>'; 50 assert_true(shadowRoot.querySelector('some-element') instanceof SomeElement2); 51 assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry); 52 }, 'innerHTML on a connected shadow root should use the associated scoped registry'); 53 54 test((test) => { 55 const registry = new CustomElementRegistry; 56 class SomeElement extends HTMLElement { }; 57 registry.define('some-element', SomeElement); 58 const shadowRoot = createConnectedShadowTree(test, registry); 59 60 shadowRoot.innerHTML = '<some-element></some-element><template><some-element></some-element></template>'; 61 assert_equals(shadowRoot.querySelector('some-element').__proto__.constructor.name, 'SomeElement'); 62 assert_equals(shadowRoot.querySelector('some-element').customElementRegistry, registry); 63 assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').__proto__.constructor.name, 'HTMLElement'); 64 assert_equals(shadowRoot.querySelector('template').content.querySelector('some-element').customElementRegistry, null); 65 }, 'innerHTML on a connected shadow root should not upgrade a custom element inside a template element'); 66 67 test((test) => { 68 const registry = new CustomElementRegistry; 69 const shadowRoot = createConnectedShadowTree(test, registry); 70 shadowRoot.innerHTML = '<someelement></someelement>'; 71 assert_equals(shadowRoot.querySelector('someelement').__proto__.constructor.name, 'HTMLUnknownElement'); 72 assert_equals(shadowRoot.querySelector('someelement').customElementRegistry, registry); 73 }, 'innerHTML on a connected shadow root should be able to create an unknown element'); 74 75 </script> 76 </body> 77 </html>