Allow scoped class to be passed to the child components

[AlbertMarashi]

Feature request description.

I think Svelte is missing an important feature that other frameworks like Vue have. We need a way to easily apply CSS to a child component from the parent without having to use the verbose selector :global(childSelector) {} inside the CSS

We should be able to apply CSS via classes to child components from the parent element. This is a missing feature that should be in svelte.

Describe the solution you'd like

imagine <Link/> is a component that renders an <a> element and has some scripts for routing (eg: event.preventDefault())

Solution 1:

Add an attribute such as descendants or something to the <style> element to let svelte know that these styles should apply to child components too

<Link href="/about">About Us</Link>
<style descendants>
// notice the descendants attributes (similar to how Vue has scoped
a {
  color: red;
}
</style>

Solution 2:

Allow Child components to be given some sort of attribute that tells svelte to pass the scope to the child component, eg:

<Link:scoped/>
or
<Link scoped/>
<style>
a {
  color: red;
}
</style>

Solution 3:

Allow targeting of components within the parent CSS. eg:

<style>

Link {
  color: red;
}

// or
:component(Link) {
  color: red;
}

</style>

Describe alternatives you've considered

I have considered taking the selector :global(childSelector){} but it is far too verbose, especially if you have something like a <Link> component for JavaScript routing, and it might be found in your nav, sidebar, content, headings, footer (with each instance styled differently)

Not to mention that this only works if you wrap the component in something (selector) otherwise it would apply the global everywhere, eg:

<div>
   <Link href="/about">About Us</Link>
</div>
<style>
	div :global(a) {
		color: red;
	}
</style>

I would like to do something like this:

<Link href="/about">About Us</Link>
<style descendants>
a {
 color: red;
}
</style>

How important is this feature to you?

This is such an important issue that has been raised a number of times and I am begging the svelte team to consider adding anything like this.

I am willing to contribute adding these features if supported

Additional context

This issue has been raised many times:

@nikku summed this up perfectly

• Passing class to components #2870 (comment)

Related issues:

• RFC: Scoped Style Attribute #901
• Support for components being able to impact css scope #4661
• Passing CSS custom properties to components rfcs#13
• Styles get uncorrectly removed / how to pass down styles? #4281
• Support classes on nested components #2888
• Add the ability to add classes to slots #4443
• Support global styles - Allow multiple top-level style tag declarations with different attributes #2762
• Adding :scope pseudo-class support #1450
• https://github.com/sveltejs/rfcs/blob/style-properties/text/0000-style-properties.md

Add any other context or screenshots about the feature request here.

[AlbertMarashi]

I'll also add that attribs should be passed to child components by default, or at least some, such as class or tabindex, similar to how it's done in Vue.js - However, this may be a breaking change, and would be fine if this was not added

[AlbertMarashi]

I will provide some thoughts as to why sveltejs/rfcs#13 is incomplete too. Firstly, I'd like to say that this is a useful feature that has been added, but doesn't address the fact of targeting sub-elements

<ChildComponent
  --border="3px solid blue"
  --borderRadius="10px"
  --placeholderColor="blue"
></ChildComponent>

Some issues with this:

1. It's verbose, if you have to do this outside of an {#each} for multiple items it's not great.
2. You can't target child elements of the child component effectively
3. Writing CSS will feel more natural to users and having CSS in HTML feels hacky

I totally understand the reason for using CSS variables, and I think the addition to svelte is great, but it doesn't address the other concerns

[AlbertMarashi]

I will also provide some thoughts as to why :global won't always work:
in here, if I want to target a specific element within a slot of a child component, it's not a great or easy thing to do when you're using a preprocessor

div :global(a){
   h1 {
      color: red;  // this will not work
   }
   h2 {
       color: blue; // this will not work
   }
}

instead you must do something like

div :global(a h1){
   color: red;
}

div :global(a h2){
   color: blue;
}

which I feel is verbose, and additionally, you must wrap your child component in an element in order to target it (div in this case)

[pngwn]

Although this has been discussed previously, at least this is a more detailed proposal.

This is a significant enough proposal both in terms of semantics and API that it warrants an RFC. Please make a pull request in https://github.com/sveltejs/rfcs where it can be discussed in full.

[AlbertMarashi]

Thanks @pngwn, will do