| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| <link rel="help" href="https://github.com/whatwg/html/issues/10854"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <script> |
| |
| function createConnectedShadowTree(test, customElementRegistry) { |
| const host = document.createElement('div'); |
| const shadowRoot = host.attachShadow({mode: 'closed', customElementRegistry}); |
| document.body.appendChild(host); |
| test.add_cleanup(() => host.remove()); |
| return shadowRoot; |
| } |
| |
| class GlobalSomeElement extends HTMLElement { }; |
| customElements.define('some-element', GlobalSomeElement); |
| |
| class GlobalOtherElement extends HTMLElement { }; |
| customElements.define('other-element', GlobalOtherElement); |
| |
| test((test) => { |
| const registry = new CustomElementRegistry; |
| |
| class ScopedSomeElement extends HTMLElement { }; |
| registry.define('some-element', ScopedSomeElement); |
| |
| class ScopedOtherElement extends HTMLElement { }; |
| registry.define('other-element', ScopedOtherElement); |
| |
| const shadowRoot = createConnectedShadowTree(test, registry); |
| const someElement = document.createElement('some-element', {customElementRegistry: registry}); |
| assert_true(someElement instanceof ScopedSomeElement); |
| someElement.innerHTML = '<other-element></other-element>'; |
| assert_true(someElement.querySelector('other-element') instanceof ScopedOtherElement); |
| }, 'innerHTML on a disconnected element should use the scoped registry it was created with'); |
| |
| test((test) => { |
| const registry1 = new CustomElementRegistry; |
| const registry2 = new CustomElementRegistry; |
| |
| class ScopedSomeElement extends HTMLElement { }; |
| registry1.define('some-element', ScopedSomeElement); |
| |
| class ScopedOtherElement1 extends HTMLElement { }; |
| registry1.define('other-element', ScopedOtherElement1); |
| class ScopedOtherElement2 extends HTMLElement { }; |
| registry2.define('other-element', ScopedOtherElement2); |
| |
| const shadowRoot1 = createConnectedShadowTree(test, registry1); |
| const shadowRoot2 = createConnectedShadowTree(test, registry2); |
| const someElement = document.createElement('some-element', {customElementRegistry: registry1}); |
| someElement.innerHTML = '<other-element></other-element>'; |
| assert_true(someElement.querySelector('other-element') instanceof ScopedOtherElement1); |
| shadowRoot2.appendChild(someElement); |
| someElement.innerHTML = '<other-element></other-element>'; |
| assert_true(someElement.querySelector('other-element') instanceof ScopedOtherElement1); |
| someElement.remove(); |
| someElement.innerHTML = '<other-element></other-element>'; |
| assert_true(someElement.querySelector('other-element') instanceof ScopedOtherElement1); |
| }, 'innerHTML on an inserted element should continue to use the scoped registry it was created with'); |
| |
| </script> |
| </body> |
| </html> |
