[✨] Access first component's element in CSS's parent page

[GrandSchtroumpf]

Is your feature request related to a problem?

I'm using a scoped styled components inside a scoped style page for safe styling, but accessible the component in my CSS is not easy :

const Accordion = component$(() => {
  useStylesScoped$(accordionStyles);
  return <ul class="q-accordion">...</ul>
})

export default component$(() => {
  useStylesScoped$(pageStyles);
  return <Accordion>...</Accordion>;
})

If I want to update the style of the accordion in my page (width, margin, ...) I'll have to use :global() :

:global(.q-accordion) {
  //
}

This has two problems :

• We need to know the selector of the accordion (which mean more documentation for external libraries)
• The style is not scoped to the component page anymore (if another child component in the page uses the accordion it will have the parent style)

Describe the solution you'd like

There are some solutions depending on ho hard this is :

1. Access first element of the component with selector :

// If Accordion has two element, Accordion select the first
:component(Accordion) {
  margin: 24px;
}

2. Provide a scopedClass (or better naming) attribute that would access the scopeId of the current component and apply it to the first child:

export default component$(() => {
  useStylesScoped$(pageStyles);
  return <Accordion scopedClass="accordion">...</Accordion>;
});

.accordion {
  margin: 24px;
}

3. any other nicer design

Describe alternatives you've considered

Using useStyles
Using :global
Passing css module
Passing the scopeId in the class: <Accordion class={[scopedId, 'accordion']}>

Additional context

No response

[gioboa]

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