Hacker News new | ask | show | jobs
by alskdjflaskjdhf 1557 days ago
On the other hand, I find Svelte's handling of this half-baked, as there's no way to pass scoped classes to a component, only to a HTML element. [1] In fact, I find this so frustrating that I have actually given up on Svelte's CSS scoping entirely and I use Tailwind instead, which also solves the same problem by almost [2] completely disregarding the cascade altogether.

[1] Why would you want to do this? Well, what about layout? And what if you have a component that wraps or otherwise behaves like an HTML element?

[2] Of course Tailwind supports modifiers, which do cascade, but everything is still local to a single element.
1 comments
xiphias2 1557 days ago
One of the questions for passing scoped classes to a component is why you want to do it. If you have complex selectors, it would effect the implementation of the component, so I think that would be an anti-pattern. Just modifying the root would be great, but in Svelte I believe one component can translate to multiple root nodes, so all of them would need to get the styles, which again would increase the coupling between the component usage and implementation. I think there's just no clean way to do what you want.
link
alskdjflaskjdhf 1557 days ago
I already said why in my first comment:

> Why would you want to do this? Well, what about layout? And what if you have a component that wraps or otherwise behaves like an HTML element?

Yes, it's nothing something you'd want to do willy-nilly or all the time, but there are perfectly valid use cases. This issue has been one of the single most-commented in the Svelte repos with tons of back and forth and a lot of demand so this isn't just an obscure complaint either.

As for how to resolve it, there are plenty of clean ways to do it. Svelte's style scoping is done via a unique class per component. It suffices to simply provide some way to pass this class from a parent to a child, for example, and let the child component decide what to do with it. There are many possible variations on this theme. The obstacle to resolving this problem isn't technical infeasibility, it's that to date the maintainers just haven't cared.

link
xiphias2 1557 days ago
> It suffices to simply provide some way to pass this class from a parent to a child, for example, and let the child component decide what to do with it.

Again, the child component can't decide what to do with a class, as it can't know specifics about the parent. It would break the modularity.

I checked the most commented issue, it's about the reactivity system doing only one round of checking in topological ordering, which could be fixed, but could cause infinite loop, and again the problem is not implementation, but deciding on the best design:

https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3A...

link