Not intended to be merged. For demonstration only.
Shows how querySelectorAll will find nested slots if we use only [slot="my-slot"], while :scope > [slot="my-slot"] will only find the slots for the webcomponent itself.
Namespacing slots like my-component--my-slot reduces, but does not eliminate this issue. Most components won't have themselves within them, but some might, such as layout components.
This really is mostly an issue for things like default slots or other common names like image or title.
If for example you have a listing with a hero image and child cards, you may use image on the listing component as well as in the child cards.
Description
Not intended to be merged. For demonstration only.
Shows how
querySelectorAll
will find nested slots if we use only[slot="my-slot"]
, while:scope > [slot="my-slot"]
will only find the slots for the webcomponent itself.Namespacing slots like
my-component--my-slot
reduces, but does not eliminate this issue. Most components won't have themselves within them, but some might, such as layout components.This really is mostly an issue for things like default slots or other common names like
image
ortitle
.If for example you have a listing with a hero image and child cards, you may use
image
on the listing component as well as in the child cards.Testing steps
Examples