Is there a way in Svelte to add styles that only affect the current component and any descendant components?
Svelte supports a native :global() selector wrapper which will declare styles for that selector in the global scope, but I am looking for something similar which only matches selectors in the current or any descendant components.
For example (REPL):
App.svelte
<script>
import C1 from './C1.svelte';
let name = 'world';
</script>
<div><C1>Hello {name}!</C1></div>
C1.svelte
<script>
import C2 from './C2.svelte';
let name = 'world';
</script>
<style>
:global(div) {
padding: 10px;
background-color: blue;
}
div {
background-color: red;
}
</style>
<div><C2><slot /></C2></div>
C2.svelte
<div><slot /></div>
In the above example, all three components receive the global styling from the middle child component, C1.svelte. I am looking for a way to do a sort of hybrid styling (not passing down styles to child components) to add "global-down" styles that only affect components downward in the component tree.
When the :global() selector wrapper is not used, matched nodes are assigned a unique class which the selector then targets, added to the selector during compilation. What I am asking/suggesting would be something like this:
:find(div) {
background-color: blue;
}
…where :find() similarly assigns a unique class to any HTML elements matched in the same or descending components. Is this possible?
You can scope styles to only child components by combining :global() with a scoped selector. For instance, the following selector will apply to all divs in any component that are the descendant of a div in this component.
<style>
div :global(div) {
padding: 10px;
background-color: blue;
}
</style>
The selector is transformed to something like this:
div.svelte-hash div { /* etc */ }
If you also want to also target top-level divs in this component, you could write the rule like this (though this may have CSS specificity implications):
<style>
div, div :global(div) {
padding: 10px;
background-color: blue;
}
</style>