Comments (8)
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>
from svelte.
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?!
from svelte.
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?
from svelte.
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.
from svelte.
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.
from svelte.
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
from svelte.
I am not saying
class:
, I am sayinganyprop: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.
from svelte.
interesting utility indeed, thank you
from svelte.
Related Issues (20)
- Svelte 5 - $inspect rune breaking $state-reactivity
- Svelte 5: using `var` with `$state` is brittle HOT 2
- SvelteKit compatibility with Svelte 5
- Official spanish Svelte documentation HOT 1
- "$" character escapes environment variables HOT 3
- svelte:head a like for custom elements with shadow DOM
- Svelte 5: False positive on variable with same name as rune in `.svelte.js` files. HOT 2
- hydration_mismatch with nested input field HOT 1
- Svelte 5 - keyed each duplicate error HOT 2
- Svelte 5: `{#if}` blocks are not tree shaken... shook? HOT 11
- $effect does not detect values inside falsey if statement HOT 2
- Restore traditional CSS styling model to Svelte ( I hate Svelte's approach to Global CSS ) HOT 7
- Svelte 5: nested transition is buggy HOT 7
- Svelte 5: $bindable fallback do not work HOT 3
- 5.0.0-next.214+ regression: $$_import_defaults is not defined HOT 4
- Svelte 5: Sibling elements with different out:transition durations makes the content flash HOT 3
- `$state(...)` can only be used as a variable declaration initializer or a class field HOT 9
- Allow flexible statement for @render in Svelte 5 HOT 4
- Severe Performance Issues in Svelte Dev Mode Caused by Unrelated Chrome Tab (?) HOT 2
- Svelte 5: `svelte_component_invalid_this_value` has false positives HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.