| <!DOCTYPE html> |
| <title>Tests ShadowRoot.createElement APIs work with scoped custom element registries</title> |
| <meta name="author" title="Xiaocheng Hu" href="mailto:[email protected]"> |
| <link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <body> |
| <script> |
| class TestAutonomous extends HTMLElement {}; |
| class TestCustomizedBuiltIn extends HTMLParagraphElement {}; |
| |
| function attachShadowForTest(t, registry) { |
| const host = document.createElement('div'); |
| const shadow = host.attachShadow({mode: 'open', registry}); |
| document.body.appendChild(host); |
| t.add_cleanup(() => host.remove()); |
| return shadow; |
| } |
| |
| test(t => { |
| const registry = new CustomElementRegistry; |
| registry.define('test-element', TestAutonomous); |
| |
| const shadow = attachShadowForTest(t, registry); |
| assert_true(shadow.createElement('test-element') instanceof TestAutonomous); |
| |
| // Verify that it doesn't pollute other tree scopes. |
| const shadow2 = attachShadowForTest(t); |
| assert_false(shadow2.createElement('test-element') instanceof TestAutonomous); |
| |
| const shadow3 = attachShadowForTest(t, new CustomElementRegistry); |
| assert_false(shadow3.createElement('test-element') instanceof TestAutonomous); |
| |
| assert_false(document.createElement('test-element') instanceof TestAutonomous); |
| }, 'ShadowRoot.createElement() for autonomous custom element'); |
| |
| test(t => { |
| const html = 'http://www.w3.org/1999/xhtml'; |
| |
| const registry = new CustomElementRegistry; |
| registry.define('test-element', TestAutonomous); |
| |
| const shadow = attachShadowForTest(t, registry); |
| assert_true(shadow.createElementNS(html, 'test-element') instanceof TestAutonomous); |
| |
| // Verify that it doesn't pollute other tree scopes. |
| const shadow2 = attachShadowForTest(t); |
| assert_false(shadow2.createElementNS(html, 'test-element') instanceof TestAutonomous); |
| |
| const shadow3 = attachShadowForTest(t, new CustomElementRegistry); |
| assert_false(shadow3.createElementNS(html, 'test-element') instanceof TestAutonomous); |
| |
| assert_false(document.createElementNS(html, 'test-element') instanceof TestAutonomous); |
| }, 'ShadowRoot.createElementNS() for autonomous custom element'); |
| |
| test(t => { |
| const registry = new CustomElementRegistry; |
| registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'}); |
| |
| const shadow = attachShadowForTest(t, registry); |
| assert_true(shadow.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| // Verify that it doesn't pollute other tree scopes. |
| const shadow2 = attachShadowForTest(t); |
| assert_false(shadow2.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| const shadow3 = attachShadowForTest(t, new CustomElementRegistry); |
| assert_false(shadow3.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| assert_false(document.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| }, 'ShadowRoot.createElement() for customized built-in element'); |
| |
| test(t => { |
| const html = 'http://www.w3.org/1999/xhtml'; |
| |
| const registry = new CustomElementRegistry; |
| registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'}); |
| |
| const shadow = attachShadowForTest(t, registry); |
| assert_true(shadow.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| // Verify that it doesn't pollute other tree scopes. |
| const shadow2 = attachShadowForTest(t); |
| assert_false(shadow2.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| const shadow3 = attachShadowForTest(t, new CustomElementRegistry); |
| assert_false(shadow3.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| |
| assert_false(document.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); |
| }, 'ShadowRoot.createElementNS() for customized built-in element'); |
| |
| </script> |
| </body> |
| |
