Auto propagate classes

[PKWadsy]

Describe the problem

An EXTREMELY common pattern when developing web apps is to give a component a class property and then apply that class to the top-level DOM element of that component. It allows the consumer of the component to customise it, resize it, place it in a different location on the screen etc. This is a much better solution than just wrapping it in a div and styling that because it allows much greater flexibility.

But you often also want to apply your own classes to the same top-level element within the component. This leads to having to write the same ugly boilerplate code in almost all of my components:

<script lang="ts">
	let clazz: string = '';
	export { clazz as class };
</script>

<div class={`${clazz} foo bar ...`}>
    ..rest of my component
</div>

Sure, it's not that much. But, again, I am doing this on almost every component of my app.

Describe the proposed solution

Make all components have a class prop by default which is automatically merged with the top level element of the component.

So something like this

<!-- App.svelte -->
<MyComponent class="foo" />

<!-- MyComponent.svelte -->
<div class="bar bazz"></div>

Would compile to something like this

<div class="foo bar bazz"></div>

This simple feature would make svelte feel much more elegant and possibly save developers a bit of time too.

Importance

would make my life easier

[katriellucas]

This is something I believe I have thought before but there is a problem, Svelte lets you have multiple top-level elements, so how can the compiler decide where to put classes?

<!-- App.svelte -->
<MyComponent class="foo" />

<!-- MyComponent.svelte -->
<div class="bar bazz"></div>
<div class="qux"></div>

There is two top elements here for example, what if you want to change the second one?

[PKWadsy]

There are a few ways I think can think of to go about this.

There are a few ways you could go about this.

1. Apply the class to all top-level elements
2. Apply the class to the first element.
3. Wrap everything in a div and apply the class to that.
4. Have a maker you can apply to any element you want the class to be applied to.

While solutions 1 and 2 could be quite elegant, but it would have to be made clear what is going on to new and existing users. It would also break existing projects.

I don't think solution 3 is any good either. It would also break existing projects and may frustrate users who do not understand what is going on.

A solution to these features would be to make it off by default and opt-in in some config. Or perhaps you can disable it on components which export and variable "as class".

I think solution 4 is probably the best as it makes the feature opt-in on a component-by-component basis and allows you much more flexibility (at the expense of perhaps having to add an extra keyword)

So I think it would look something like this:

<!-- App.svelte -->
<MyComponent class="foo" />

Using * after an element indicates that auto class propagation should apply to this element.

<!-- MyComponent.svelte -->
<div* class="bar bazz"></div>
<div class="qux"></div>

Compiles to

<div class="foo bar bazz"></div>
<div class="qux"></div>

But if MyComponent looks like this

<!-- MyComponent.svelte -->
<div* class="bar bazz"></div>
<div* class="qux"></div>

The compilation result would be

<div class="foo bar bazz"></div>
<div class="foo qux"></div>

or if neither div had a star:

<div class="bar bazz"></div>
<div class="qux"></div>

Thoughts?

[xiBread]

Further reading: Vue's behavior

[rmunn]

For what it's worth, I would tend to expect the foo class to be applied to all the component's elements, unless the component opted out of applying caller-specified classes to a particular element or set of elements. I.e., going with the div* syntax from your example, I'd expect any <div> elements to get "foo" applied and any <div*> elements to have only the classes explicitly specific in the component HTML.

The reason I have this intuition is because otherwise, if I edit the component and add a second div, that changes the behavior of my first div in a surprising way. I used to have <div>This is the component</div> and that could be styled. Then I changed it to <div>This is the component</div> <div class="footer">Some footer text</div> and suddenly my component is no longer applying the styles the user specified? Why?

So my inclination would be for a combination of 1 and 4: the class that the component caller asks for ("foo") is applied to all top-level elements, except for the ones that opt out with some syntax. (I'd probably suggest an attribute like svelte:apply-external-classes="no" for that syntax).

[PKWadsy]

Ohh I see what you mean. Sorry, I miscommunicated.

Even if there was only one top-level element, you would still need the <div*>...</div> syntax. So it is only applied to elements with the * regardless of how many top-level elements there are.

This solves the issue of backwards compatibility because all existing svelte code would still work the same. It also avoids having to add a config to turn it off project-wide.