Is there a way in Svelte to add styles that only affect the current ponent and any descendant ponents?

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 ponents.

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 ponents receive the global styling from the middle child ponent, C1.svelte. I am looking for a way to do a sort of hybrid styling (not passing down styles to child ponents) to add "global-down" styles that only affect ponents downward in the ponent 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 pilation. 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 ponents. Is this possible?

Is there a way in Svelte to add styles that only affect the current ponent and any descendant ponents?

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 ponents.

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 ponents receive the global styling from the middle child ponent, C1.svelte. I am looking for a way to do a sort of hybrid styling (not passing down styles to child ponents) to add "global-down" styles that only affect ponents downward in the ponent 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 pilation. 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 ponents. Is this possible?

• javascript
• css
• svelte
• svelte-3
• svelte-ponent

Share Improve this question Follow asked Mar 2, 2022 at 17:35 Brandon McConnellBrandon McConnell 6,13911 gold badge2424 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You can scope styles to only child ponents by bining :global() with a scoped selector. For instance, the following selector will apply to all divs in any ponent that are the descendant of a div in this ponent.

<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 ponent, 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>