Svelte 5: this type of directive is not valid on components

[orefalo]

Describe the bug

The code below will bark on class: "this type of directive is not valid on components"

This is very frustrating. Not only does it fail to compile, but manually creating the class string won't be detected by Svelte, and the .rtl CSS class will be marked as unused.

<MyComponent
    class:rtl={isRTL}>
This will not work, class: can't be used on custom components
</MyComponent>
...
<style>
  .rtl {
    direction: rtl;
  }
</style>

Reproduction

REPL

Logs

No response

System Info

any browser

Severity

annoyance

[7nik]

Duplicate of #2870 + #5236. And it's never worked, so it's a feature request but not a bug.

This topic has been raised multiple times, but no really good solution has been proposed. You still get more flexibility with

<div class="wrapper">
  <MyComponent class={isRTL ? "rtl" : ""}>
     This will work
  </MyComponent>
</div>
...
<style>
  .wrapper :global(.rtl) {
    direction: rtl;
  }
</style>

[orefalo]

Agreed, it's a feature request, not a bug

Note that I am not saying there is no ways around it.

What I am saying is that there must be a more intuitive way.

Here is my analysis, I find that there is nothing Svelte in the current behavior.

• it is not intuitive, why can I do <div class:rtl={isRTL}/> and not <MyComp class:rtl={isRTL}/>.
• It forces the css classes as global, which break proper encapsulation
• It makes the alternative code seem unpolished and difficult to read.

consider the code below:

<MyComp
 class={`tree${rtl ? ' tree--rtl rtl' : ''}${dragOvering ? 'tree--drag-overing drag-overing' : ''}`} />

as opposed to:

<MyComp
  class="tree"
  class:tree--rtl={rtl}
  class:rtl={rtl}
  class:tree--drag-overing={dragOvering}
  class:drag-overing={dragOvering} />

The proposed syntax:

• is intuitive
• enforces proper encapsulation
• is easy to read
• requires no learning curve, it's been used on HTMLElement

All we are doing with this class: syntax, is building a parameter that will be send to a component as a prop.
In fact the same construct could be used for any prop (value:Its-me={user==="olivier") or myprop:somevalue={condition})

I am happy to see other tickets will people having the same opinion.

Last point, it can be done with other frameworks.. why not in Svelte?!

[7nik]

Here is team conclusion on it. Also a good point, plus its continuetion. 3rd-party solution: preprocessor (though seems kinda dead).

There are a whole bunch of questions to whatever proposed solution:

• What if a component has multiple root elements?
• What if a component wants to apply the passed class to multiple elements, non-root element(s), or bypass down?
• What if multiple elements in a component need to be styled (pass a separate class for each element)?
• Which specificity will the class have, and how can it be changed to the desired one?

[orefalo]

I will need to read each of these pointers, thank you. Looks like I am not the only one...

The points however make little sense to me as they all focus on the component implementation, where the proposed solution is used to simplify the concatenation of values when the component is called.

Maybe I am missing something myself, please enlighten me.

[brunnerh]

Adding the class: directive on its own would be a bit inconsistent if Svelte does not deal with the scoping issue at the same time.

It would indicate that the class property/attribute is somehow special but it would not even work for locally defined styles unless you also use :global as shown by @7nik.

[orefalo]

I am not saying class:, I am saying anyprop:string={condition}.
Bottom line, it's a construct to concatenate strings, with any prop, not just class.

by now, I've seen many way around, people are suggesting to pass the parameters down and handle the css class from within the component. this is great if it's your code... not if the components are purchased and closed source.

anyway, for me it's a big miss in svelte 5 as it stands today.

actually if anyone can point to a way to implement it via a plugin, I'll be happy to use it

[brunnerh]

I am not saying class:, I am saying anyprop:string={condition}.
Bottom line, it's a construct to concatenate strings, with any prop, not just class.

It's not, because this only makes any sense for class on elements.

You could use a utility like clsx for this.

[orefalo]

interesting utility indeed, thank you