[✨] 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[bot]]

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.

[adaliszk]

I understand. Please let me know if anything new is needed for discussion or progress.

[mhevery]

I think frameworks have a choice to make if things such as components and slots have a real world DOM element representation. Angular and web-components such as lit choose yes, while most JSX-based frameworks choose no. There are pros and cons for both choices. I think in the case you are describing, you are wishing that we would have a DOM element so that you can style it, but we don't. I don't think it would be easy to add without breaking everyone else, so we probably will not do it.

I think the work around here is to maybe use inlined components and then look at children property and use that to render extra <div>s for styling purposes. Because it is something which can be don in user land, we don't think it should be part of the framework.

[adaliszk]

Currently, I do wrap all my slots into a parent <div> to achieve the same utility, but that feels like a workaround that could be solved by simply allowing the Slot element to automatically append a generated class that then can be targeted with the container's stylesheet.

I see and agree that JSX-based solutions do not follow DOM-based solutions and vice versa. I am not expecting to change the fundamental architecture; however, I am not sure the suggested solution of just wrapping every slot in a parent element is without opportunities.