4 ms·

I think one of the biggest "mistakes" with web components was coupling them in people's mind with shadow dom. For app dev (not library dev) web components are

I think one of the biggest "mistakes" with web components was coupling them in people's mind with shadow dom. For app dev (not library dev) web components are a super lightweight easy option when you stick with the light dom. You can continue to use bootstrap or tailwind or whatever css thing you like, but get great functional encapsulation with near zero cost, especially if you use lit-html or something similar as a renderer. My teams have generally found working with native web components refreshing. It takes a dev coming from the framework world about a week to adjust, and then they never want to go back. Just using simple class properties and a manual call to a render function on set() gives you all the benefits of reactivity without all the hassle of frameworks. The problem most people have with getting started with WCs is that there's not much out there showing how do to it in "easy mode". Most of the getting started things throw you right into shadow dom, css parts, and all these really painful technologies that were primarily intended for use by library authors, not app devs. I've been building apps with native WCs for a long time now, I should get off my keister and write a guide on how to make your life easier with WCs, something like "The Good Parts".

meiraleal 2y ago
That's exactly it. We are just missing slots for lightDOM
nolanl 2y ago
I use shadow DOM every day, but yes, it is often the part of WCs that baffles people – probably because they don't need it. Alternative approaches that may work for your use case: - "HTML web components" [1] - light DOM only, SSR-first, good as a replacement for "jQuery sprinkles" - "Shadow gristle" [2] - use as little shadow DOM as possible. If you need styling or composition, put it in the light DOM! [1]: https://adactio.com/journal/20618 https://adactio.com/journal/20618 [2]: https://glazkov.com/2023/03/02/shadow-gristle/ https://glazkov.com/2023/03/02/shadow-gristle/
kolme 2y ago
In my last gig we had exactly the same stack (WC without the shadow dom part + just lit-html) and it's great. The best part is not having a dependency hell situation every other week.
replete 2y ago
> I've been building apps with native WCs for a long time now, I should get off my keister and write a guide on how to make your life easier with WCs, something like "The Good Parts". If you consider writing about this I'd like to read it. Or listen! Do you have a blog? In the process of gathering various comments about this technology as it appears there are blessings and curses, depending on how you use it.

meiraleal 2y ago

That's exactly it. We are just missing slots for lightDOM

nolanl 2y ago

I use shadow DOM every day, but yes, it is often the part of WCs that baffles people – probably because they don't need it. Alternative approaches that may work for your use case: - "HTML web components" [1] - light DOM only, SSR-first, good as a replacement for "jQuery sprinkles" - "Shadow gristle" [2] - use as little shadow DOM as possible. If you need styling or composition, put it in the light DOM! [1]: https://adactio.com/journal/20618 https://adactio.com/journal/20618 [2]: https://glazkov.com/2023/03/02/shadow-gristle/ https://glazkov.com/2023/03/02/shadow-gristle/

kolme 2y ago

In my last gig we had exactly the same stack (WC without the shadow dom part + just lit-html) and it's great. The best part is not having a dependency hell situation every other week.

replete 2y ago

> I've been building apps with native WCs for a long time now, I should get off my keister and write a guide on how to make your life easier with WCs, something like "The Good Parts". If you consider writing about this I'd like to read it. Or listen! Do you have a blog? In the process of gathering various comments about this technology as it appears there are blessings and curses, depending on how you use it.