๐ธslotted nodes
a.k.a distributed nodes.
Last updated
Was this helpful?
a.k.a distributed nodes.
Last updated
Was this helpful?
web โฉ component โฉ slot โฉ slotted nodes
โฉ ::slotted()
Only custom element's top-level children (in the light DOM) may have [slot]
attributeโ๏ธ ๐ See "light DOM" tab in example code in .
::slotted() only select slotted element itself, not its descendants (content)โ๏ธ
slotted content come from light DOM, they use document stylesโ๏ธ
shadow DOM styles do not affect slotted contentโ๏ธ
::slotted() only select slotted element itself, not its descendants (content)โ๏ธ
::slotted() can't go inside light DOM, for example: ::slotted(div) p is invalidโ๏ธ
::slotted() can't be used in .querySelector()โ๏ธ
ๅจไธ้ข็็ฏไพ็ขผไธญ๏ผๆๅๅๅฅๅจๅค้จๅๅ
ง้จ CSS ๅฐ <span>
ๅ
็ด ๅใ็ฒ้ซใ่ใ็ด
่ฒใๆ ผๅผ่จญๅฎ๏ผๅฐๆผๆๅ
ฅ shadow DOM<slot>
็ <span>
่่จ๏ผๅชๆๅค้จ็ใ็ฒ้ซใ่จญๅฎๆๆ (๐ see: "codepen" tab below)ใ ๐พ replit
๐พ ::slotted() lab
use document (outer) styles (in light DOM).
style <slot> (in shadow DOM) and rely on CSS inheritance.
use ::slotted(ยซselectorยป) in shadow DOM.
๐