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
|
<script>
window.addEventListener('DOMContentLoaded', () => {
const outer = document.createElement('section');
document.body.appendChild(outer);
const root1 = document.createElement('div');
root1.setAttribute('id', 'root1');
outer.appendChild(root1);
const shadowRoot1 = root1.attachShadow({mode: 'open'});
const span1 = document.createElement('span');
span1.setAttribute('data-testid', 'foo');
span1.textContent = 'Hello from root1';
shadowRoot1.appendChild(span1);
const root2 = document.createElement('div');
shadowRoot1.appendChild(root2);
const shadowRoot2 = root2.attachShadow({mode: 'open'});
const span2 = document.createElement('span');
span2.setAttribute('data-testid', 'foo');
span2.setAttribute('id', 'target');
span2.textContent = 'Hello from root2';
shadowRoot2.appendChild(span2);
const root3 = document.createElement('div');
shadowRoot1.appendChild(root3);
const shadowRoot3 = root3.attachShadow({mode: 'open'});
const span3 = document.createElement('span');
span3.setAttribute('data-testid', 'foo');
span3.textContent = 'Hello from root3';
shadowRoot3.appendChild(span3);
const span4 = document.createElement('span');
span4.textContent = 'Hello from root3 #2';
span4.setAttribute('attr', 'value space');
shadowRoot3.appendChild(span4);
});
</script>
|
