Description
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