-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslot-assigned-nodes.html
90 lines (85 loc) · 3.49 KB
/
slot-assigned-nodes.html
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
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: Slot Assigned Nodes</title>
<meta name="author" title="Eugene Kashida" href="mailto:[email protected]">
</head>
<body>
<script>
class MyParent extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ mode: 'closed' });
}
connectedCallback() {
this._shadowRoot.innerHTML = `
<div>
<slot>
</slot>
</div>
`;
var slots = this._shadowRoot.querySelectorAll('slot');
slots.forEach(function (slot, index) {
console.log(index, 'my-parent', 'slot.assignedNodes()', slot.assignedNodes());
// console.log(index, 'my-parent', 'slot.assignedElements()', slot.assignedElements());
console.log(index, 'my-parent', 'slot.assignedNodes({flatten:true})', slot.assignedNodes({flatten:true}));
// console.log(index, 'my-parent', 'slot.assignedElements({flatten:true})', slot.assignedElements({flatten:true}));
console.log(index, 'my-parent', 'slot.querySelector("*")', slot.querySelectorAll('*'));
console.log(index, 'my-parent', 'slot.childNodes', slot.childNodes);
console.log(index, 'my-parent', 'slot.children', slot.children);
});
}
}
class MyChild extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ mode: 'closed' });
}
connectedCallback() {
this._shadowRoot.innerHTML = `
<div>
<slot>
<button>[default content] unnamed slot</button>
</slot>
<slot name="foo">
<button>[default content] foo slot</button>
</slot>
<slot name="bar">
<button>[default content] bar slot</button>
</slot>
</div>
`;
var slots = this._shadowRoot.querySelectorAll('slot');
slots.forEach(function (slot, index) {
console.log(index, 'my-child', 'slot.assignedNodes()', slot.assignedNodes());
// console.log(index, 'my-child', 'slot.assignedElements()', slot.assignedElements());
console.log(index, 'my-child', 'slot.assignedNodes({flatten:true})', slot.assignedNodes({flatten:true}));
// console.log(index, 'my-child', 'slot.assignedElements({flatten:true})', slot.assignedElements({flatten:true}));
console.log(index, 'my-child', 'slot.querySelector("*")', slot.querySelectorAll('*'));
console.log(index, 'my-child', 'slot.childNodes', slot.childNodes);
console.log(index, 'my-child', 'slot.children', slot.children);
});
}
}
customElements.define('my-parent', MyParent);
customElements.define('my-child', MyChild);
var div = document.createElement('div');
div.innerHTML = `
<!-- myParentSlot.assignedNodes() => [text, my-child, text] -->
<!-- myParentSlot.assignedNodes({flatten:true}) => [text, my-child, text] -->
<my-parent>
<my-child>
<button slot="foo">[assigned content] foo slot (1)</button>
<button slot="foo">[assigned content] foo slot (2)</button>
<slot slot="bar" name="baz">
<button>[default content] baz slot</button>
</slot>
</my-child>
</my-parent>
`;
document.body.appendChild(div);
var myParent = document.querySelector('my-parent');
console.log('my-parent', 'myParent.childNodes', myParent.childNodes);
</script>
</body>
</html>