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