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
|
<!DOCTYPE html>
<meta charset="utf-8" >
<meta name="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<meta name="assert" content="Imperatively assigned node overwrites fallback contents, when dynamically created.">
<title>Shadow DOM: Slots and fallback contents</title>
<link rel="match" href="slot-fallback-content-006-ref.html">
<p>Test passes if there are two lines of text "B", "A" below.</p>
<div id="host1">
<slot id="slot1" name="slot1">FAIL</slot>
</div>
<div id="A">A</div>
<div id="B">B</div>
<p>Test passes if there are two lines of text "D", "C" below.</p>
<div id="host2">
<slot id="slot2" name="slot2">FAIL</slot>
</div>
<div id="C">C</div>
<div id="D">D</div>
<p>Test passes if there are two lines of text "F", "E" below.</p>
<div id="host3">
<slot id="slot3" name="slot3">FAIL</slot>
</div>
<div id="E">E</div>
<div id="F">F</div>
<p>Test passes if there is one line of text "SLOT4" below.</p>
<div id="host4">
<slot id="slot4" name="slot4">SLOT4</slot>
</div>
<div id="G">FAIL</div>
<div id="H">FAIL</div>
<p>Test passes if there is one line of text "SLOT5" below.</p>
<div id="host5">
<slot id="slot5" name="slot5">FAIL</slot>
</div>
<div id="I">FAIL</div>
<div id="J">FAIL</div>
<script>
/*
1. Append nodes to document.
2. Assign nodes to slot.
*/
const shadowRoot1 = host1.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot1.appendChild(slot1);
const s1 = shadowRoot1.getElementById('slot1');
host1.append(A, B);
s1.assign(B, A);
/*
1. Assign nodes to slot.
2. Append nodes to document.
*/
const shadowRoot2 = host2.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot2.appendChild(slot2);
const s2 = shadowRoot2.getElementById('slot2');
s2.assign(D, C);
host2.append(C, D);
/*
1. Assign nodes to slot.
2. Change the fallback content.
3. Append nodes to document.
*/
const shadowRoot3 = host3.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot3.appendChild(slot3);
const s3 = shadowRoot3.getElementById('slot3');
s3.assign(F, E);
s3.innerText = 'FAIL';
host3.append(E, F);
/*
1. Append nodes to document.
2. Assign nodes to slot.
3. Remove nodes from document.
*/
const shadowRoot4 = host4.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot4.appendChild(slot4);
const s4 = shadowRoot4.getElementById('slot4');
host4.append(G, H);
s4.assign(H, G);
G.remove();
H.remove();
/*
1. Append nodes to document.
2. Assign nodes to slot.
3. Change the fallback content.
4. Remove nodes from document.
*/
const shadowRoot5 = host5.attachShadow({ mode: "open", slotAssignment: 'manual' });
shadowRoot5.appendChild(slot5);
const s5 = shadowRoot5.getElementById('slot5');
host5.append(I, J);
s5.assign(J, I);
s5.innerText = 'SLOT5';
I.remove();
J.remove();
</script>
|
