Global Descendant-Only Styles in Svelte

Question

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?

Answer 1

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>