[✨] Allow classes with Slots for selecting with global()

[adaliszk]

Is your feature request related to a problem?

When building components that rely on slots and Shadow DOM, I used various selectors and tricks with the slot element before; however, the CSS options became pretty limited when using the q:slot and the Slot component.

One trick I have used before is to assign a class to a slot and select the slotted elements only in that:

https://stackblitz.com/edit/lit-classed-slot-selector?file=src%2Fmy-element.ts

import { css, html, LitElement } from 'lit'

export class SlotElementSelector extends LitElement
{
    static styles = css`
        slot.something::slotted(*) {
            color: red;
        }
    `
    
    render() {
        return html`
            <slot class="something" name="something"></slot>
            <slot></slot>
        `
    }
}

However, given how the Slot element only allows name field and it is not an actual element, I cannot do this anymore:

https://stackblitz.com/edit/qwik-classed-slot-selector?file=src%2Froutes%2Findex.tsx

import { Slot, useStylesScoped$, component$ } from '@builder.io/qwik';

export const SlotSelector = component$(() => {
  // language=css
  useStylesScoped$(`
    .something > :global(*) {
      color: red;
    }
  `);

  return (
    <main>
      <Slot class={'something'} name={'something'} />
      <Slot />
    </main>
  );
});

export default component$(() => {
  return (
    <SlotSelector>
      <h1 q:slot="something">I am in the "something" slot</h1>
      <h2>I am in the default slot</h2>
    </SlotSelector>
  );
});

Type '{ class: string; name: string; }' is not assignable to type 'IntrinsicAttributes & { name?: string | undefined; }'.
  Property 'class' does not exist on type 'IntrinsicAttributes & { name?: string | undefined; }'.(2322)

Describe the solution you'd like

Given how the Slot element is not an actual slot, the path I can see would be to allow the class property and automatically attach that to all slotted elements within the particular slot. That way, the :global() could have a valid selector.

<SlotSelector>
    <h1 q:slot="something">I am in the "something" slot</h1>
    <h2>I am in the default slot</h2>
</SlotSelector>

would render as:

<main>
    <h1 q:slot="something" class="⭐️p23nm7-1 something ">I am in the "something" slot</h1>
    <h2>I am in the default slot</h2>
</main>

Describe alternatives you've considered

The workaround is to wrap each slot into an extra parent and use that for selecting slotted elements. While it works, it introduces additional entries in the DOM that should not be needed in the first place. Furthermore, it complicates the necessary CSS as selectors such as :empty would see the host component as filled even if no elements were slotted.

Alternatively, one could drop Slots altogether and use props, but I consider that an anti-pattern.

Additional context

The main reason why this is important for me is that I want to use CSS Grid to align slotted elements when the host element is not empty. When nothing is passed into the slots, the whole component renders nothing, effectively removing itself from a bigger component's layout.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• lit-classed-slot-selector (Open reproduction)
• qwik-classed-slot-selector (Open reproduction)

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.