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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>ElementInternals.shadowRoot</title>
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/#dom-elementinternals-shadowroot">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
let constructed = false;
customElements.define('custom-open', class extends HTMLElement {
constructor() {
super();
const elementInternals = this.attachInternals();
assert_equals(elementInternals.shadowRoot, null);
const shadow = this.attachShadow({mode: 'open'});
assert_equals(elementInternals.shadowRoot, shadow);
constructed = true;
}
});
const element = document.createElement('custom-open');
assert_true(constructed);
}, 'ElementInternals.shadowRoot allows access to open shadow root');
test(() => {
let constructed = false;
customElements.define('custom-closed', class extends HTMLElement {
constructor() {
super();
const elementInternals = this.attachInternals();
assert_equals(elementInternals.shadowRoot, null);
const shadow = this.attachShadow({mode: 'closed'});
assert_equals(elementInternals.shadowRoot, shadow);
assert_equals(this.shadowRoot, null);
constructed = true;
}
});
const element = document.createElement('custom-closed');
assert_true(constructed);
}, 'ElementInternals.shadowRoot allows access to closed shadow root');
test(() => {
let constructed = false;
const element = document.createElement('x-1');
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before definition exists');
customElements.define('x-1', class extends HTMLElement {
constructor() {
super();
assert_true(!!this.attachInternals());
constructed = true;
}
});
assert_false(constructed);
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before constructor');
customElements.upgrade(element);
assert_true(constructed);
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals already called');
}, 'ElementInternals cannot be called before constructor, upgrade case');
test(() => {
let constructed = false;
const element = document.createElement('x-2');
customElements.define('x-2', class extends HTMLElement {
constructor() {
super();
// Don't attachInternals() here
constructed = true;
}
});
assert_throws_dom('NotSupportedError', () => element.attachInternals(),'attachInternals cannot be called before constructor');
assert_false(constructed);
customElements.upgrade(element);
assert_true(constructed);
assert_true(!!element.attachInternals(),'After the constructor, ok to call from outside');
}, 'ElementInternals *can* be called after constructor, upgrade case');
test(() => {
let constructed = false;
customElements.define('x-3', class extends HTMLElement {
constructor() {
super();
assert_true(!!this.attachInternals());
constructed = true;
}
});
const element = document.createElement('x-3');
assert_true(constructed);
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals already called');
}, 'ElementInternals cannot be called after constructor calls it, create case');
test(() => {
let constructed = false;
const element = document.createElement('x-5');
customElements.define('x-5', class extends HTMLElement {
static disabledFeatures = [ 'internals' ];
constructor() {
super();
assert_throws_dom('NotSupportedError', () => this.attachInternals(), 'attachInternals forbidden by disabledFeatures, constructor');
constructed = true;
}
});
assert_false(constructed);
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals forbidden by disabledFeatures, pre-upgrade');
customElements.upgrade(element);
assert_true(constructed);
assert_throws_dom('NotSupportedError', () => element.attachInternals(), 'attachInternals forbidden by disabledFeatures, post-upgrade');
}, 'ElementInternals disabled by disabledFeatures');
test(() => {
let constructed = false;
const element = document.createElement('x-6');
const sr = element.attachShadow({mode: 'closed'});
assert_true(sr instanceof ShadowRoot);
customElements.define('x-6', class extends HTMLElement {
constructor() {
super();
assert_throws_dom('NotSupportedError', () => this.attachShadow({mode:'open'}), 'attachShadow already called');
const elementInternals = this.attachInternals();
assert_equals(elementInternals.shadowRoot, null, 'ElementInternals.shadowRoot should not be available for pre-attached shadow');
constructed = true;
}
});
assert_false(constructed);
customElements.upgrade(element);
assert_true(constructed,'Failed to construct - test failed');
assert_equals(element.shadowRoot, null, 'shadow root is closed');
}, 'ElementInternals.shadowRoot doesn\'t reveal pre-attached closed shadowRoot');
</script>
|
