Demonstration: sandbox component that shows how queries for slots work

[damontgomery]

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 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.

Testing steps

• Visit /?path=/story/sandbox-slotquery--slot-query
• View the console logs

Examples

<slot-query>
  <div slot="unnested">
    unnested slot content
  </div>
  <div slot="nested">
    <slot-query>
      <div slot="nested">
        nested slot content
      </div>
    </slot-query>
  </div>
</slot-query>