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

[orefalo]

trafficstars

Describe the problem

the analysis around the current props limitation on component has the following shortcomings:

• 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' : ''}`} />

Describe the proposed solution

allow myprop:somevalue={condition} manipulations on all elements, HTMLElement or Components.

The above code could be rewritten as:

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

for the following benefits:

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

thinking beyond class:, the same construct could be used for any prop (value:me={user==="olivier") or any other myprop:somevalue={condition}). Similar constructs are possible with other frameworks.

In summary, the proposal is more Svelte.

Importance

would make my life easier

[orefalo]

This time around it's a Feature request

[MotionlessTrain]

Note that this would not work for all attributes on HTMLElements: in particular, it would clash with the style directive (style:css-attribute={value})

[7nik]

Duplicate of #12229 - issue type (bug report/feature request/etc.) doesn't matter - it was closed because there already is an issue (no matter whether opened or closed) for this topic.

[orefalo]

closing, still I find the current limitation non intuitive