Visual presentation of Slot in shadow DOM from
Chromium unit test
Demo home
|
List from data
Outline:
shadow DOM blue
,
light DOM green
. They should be rendered identical.
Slots: Basic. Basic, elements only.
before slot
slot s1
after slot
slot1 override
Slots in closed; Slots in closed, elements only
before slot
slot s1
after slot
slot1 override
Slots not in a shadow tree, ... elements only
assignedSlot, assignedNodes(), assignedNodes({ flatten: true })
assignedSlot
#c1
#c2
#c3
assignedSlot
#s1
#s2
#c1
#c2
#c3
assignedSlot
#s1
#s2
#s3
#c1
#c2
#c3
assignedSlot
#s1
#s2
#c1
#c2
assignedSlot
#s2
#s1
#c1
assignedSlot, assignedNodes({ flatten: true })
#s2
#s1
#c1
assignedSlot, assignedNodes({ flatten: true })
#s2
#s1
#c1
assignedSlot, assignedNodes({ flatten: true })
#s2
#s1
#c1
assignedSlot, assignedNodes((),assignedNodes({ flatten: true })
#s5
#s6
#s7
#s8
#s1
#s2
#s3
#s4
#c5
#c6
#c7
c8
#c1
#c2
#c3
#c4