Describe the problem

It's a common thing using components to have personalized HTML elements.
For example <img /> element, i can make a <Image> component that uses <picture> by default or loading="lazy" attribute. So it's easier to re-use or change.

The problem is its still common to add custom styles to image element, like background-color object-fit and many other stuff, like aspect-ratio, width etc.

Svelte components doesn't allow that unless you make somehow :global() hacks. Which doesn't give warnings when invalid and looks hacky. And when you not try to use :global() it becomes even more hacky and makes you use a lot of boilerplate code.

Describe the proposed solution

A CSS component selector to select all of the root elements in the component.

Example:
foo.svelte

<div>
  <img />
<div/>
<a />

bar.svelte

<div>
  <Foo />
</div>
<Foo />

<style>
  div > $Foo { /* Selects `div` and `a` element in the `Foo` component, because they are in the root  */
    ...
  }
<style />

syntax can change.

Alternatives considered

An option to bind everything(attributes(class), events...) in a root element in the component.

Example:
foo.svelte

<div bind:$$root>
   <img />
<div />
<div />

bar.svelte

<Foo class="thing" on:click={() => alert()}>

<style>
.thing { /* this would only select the first `div` element in the `Foo` component
  ...
}
<style />

if none of these are applicable at least having a way to bind/pass/inherit all of the events would be cool.

Importance

would make my life easier