DEV Community

loading...

Svelte for web components, are we there yet?

adam_cyclones profile image Adam Crockett ・1 min read

Okay here's my view on Svelte. Having picked it up and attempted to use it for Web components.

I am writing a component library for a very specific admin UI.

What is Svelte:

It is not a Framework or Library it and so is not something you could compare to React, Vue, Angular etc. That might surprise you? Well Svelte is a programming language ontoitselft compiling CSS HTML and JavaScript.

In this regard it's all happening at build time which means that things can be optimized and stuff can be lighter than have no runtime overhead.

So that bit is great.

Why I don't like Svelte for web-components, I'm afraid it's not plain JavaScripty enough, the templating syntax is something like handlebars and I just want a template literal syntax. Svelte gets in the way not providing all the good things like closed encapsulated shadow Dom (that's the big one for me) I need encapsulation for embedding web components inside customer applications, so svelte web components are currently useless.

Alternatives

  • Hybrids.js
  • Riot.js
  • Lit Element (it's a bit heavy)

Discussion (6)

pic
Editor guide
Collapse
scott_yeatts profile image
Scott Yeatts

stenciljs.com/

Rich Harris has said he doesn't like a lot about web components and that they were added as an optional compile target, not the primary intent of svelte. (I'll see if I can find the link to his breakdown... Even if I don't agree with him, he's made some great tools and deserves props!)

Stencil has been great, infoQ put it in the early majority in Q1 of this year (with Svelte and Preact) and called it the "the most popular web component creation framework" in that same article (infoq.com/articles/javascript-web-...)

I've used it since beta. Even with native Typescript and JSX, it's the closest I've come to feeling like I was just writing vanilla JavaScript since I started with Angular.js back in... 2013? I think? Haha.

Anyway, it eliminates the DSL-syntax you can get with a lot of the older frameworks and things like svelte (which all have their place, nobody shoot me!). There's some syntax to get used to, but it was pretty simple to pick up just looking at the docs.

Especially since there are official guides for integrating with the major frameworks (I'm a vanilla stencil-lover myself, but there are tons of reasons to use a framework too) it's a great tool to build a design system or an app.

Now I gotta go find Max and get him to pay a promo fee or something... I feel like a salesman over here 🀣

Collapse
scott_yeatts profile image
Scott Yeatts

Aforementioned props to Rich Harris:
dev.to/richharris/why-i-don-t-use-...

Collapse
adam_cyclones profile image
Adam Crockett Author

I think your my new favourite person!

Thread Thread
scott_yeatts profile image
Scott Yeatts

Haha, hope I was helpful, thanks for the compliment!

Collapse
jaredcwhite profile image
Jared White

Curious: what is it about LitElement that you find heavy? I've been having a blast with it, doesn't seem to be too much of a hit on bundle size. You could alternatively create a vanilla web component and just use lit-html for the template rendering part.

Collapse
adam_cyclones profile image
Adam Crockett Author

I am also a lit-* fan but I have discovered compiler orientated workflows which theoretically have very little runtime overhead Svelte, Stencil and Riot.

As for size, I can't remember, I did look it up but that was a few weeks ago and I'm off to sleep soon.

Unrelated but bundling is something I won't be doing, due to the http2 world we live in (most http servers upgrade the connection for compatible clients), bundling no longer makes sense to me.