Svelte for web components, are we there yet?

Adam Crockett 🌀 - Nov 25 '20 - - Dev Community

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)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .