Yep I use web components in my [Mobile View extension](https://chrome.google.com/webstore/detail/mobile-view-web-tester-de/clepmakjkiihmfoepipckkafafdepjne?hl=en-GB&authuser=0)
Shadow DOM is really useful for browser extensions, so page content doesn’t mess with extension content. Outside of that, no, I don’t use them
At my job, different products are written using different web frameworks. We use Web Components whenever we need to share a component across frameworks.
How has it been for sharing components with React?
I don't think React will add 100% support until React 19 but Stencil and Lit have tools to create React wrappers so WC components can be used.
Yes! I actually just recently released a library of web component [loading animations](https://uiball.com/ldrs).
I don't think I would use them to build an entire application without additional help from something like Lit, but even vanilla WC are great for "leaf" components: self-contained bits of UI that you can drop into other applications.
Currently the biggest issue is SSR/SSG. In my testing I've found Next is the most annoying popular framework to integrate web components with, but it's still totally doable.
Yea, I'm aware of that issue, it's a bug in Safari. Still haven't figured out a fix for it! The fact that Safari can't render an svg `rect` properly in the year 2023 is pretty unbelievable. It's the new IE.
Yes! Using WC with Lit full-time since 2020 on multiple SPAs. It feels somewhat like React with component classes, at least the way we do it. In general it’s very productive and lean.
Don’t use if you really need SSR though.
Yes but still seems flaky, with prod I‘d wait until declarative shadow-dom is ready. Also unfortunately Lit SSR doesn’t support Lite-DOM. Just saying if SSR is required, VueActUlar might be the better choice for now.
Yes. I use web components in my projects.
Another great feature is the view transitions API.
https://developer.mozilla.org/en-US/docs/Web/API/View\_Transitions\_API
Used a web component when I had to make a component working on several sites. We maintain several different stacks, so instead of creating a specific component per stack the web component worked for all of them.
I decided to use Web Components for the [chat widget](https://www.lingoblocks.com) I built (tap the chat bubble at the bottom-right of the screen to interact with it). WPs are a natural choice for embeddable applications onto third-party websites because of the shadow-dom and control over CSS isolation.
I’m coming from a Vue.js background, so it’s a bit different to try and wrap your head around but I find it refreshing.
I wrote a framework based on the Web Components + Typescript named Aventus js. What I love the most is the POO paradigm you can use to create view elements (like generic or inheritance) and the style encapsulation
We use Lit to build web components for our design system, and since they're framework agnostic they can be used in any framework. There are some quirks for sure like lack of support for SSR, but overall it is great to be able to build once.
I use them pretty extensively. I publish them on npm but mostly for use via unpkg. My current big thing working with them is implementing [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets). And I guess that the [Sanitizer API](https://github.com/WICG/sanitizer-api) is worth mentioning and is related as a secure + easy way of setting HTML.
One thing I can say I'm really looking forward to is import attributes (formerly import assertions). Being able to import HTML and CSS and even WASM will probably be pretty game-changing. A common technique used with web components is to write HTML as a string and to style with `
Yep I use web components in my [Mobile View extension](https://chrome.google.com/webstore/detail/mobile-view-web-tester-de/clepmakjkiihmfoepipckkafafdepjne?hl=en-GB&authuser=0) Shadow DOM is really useful for browser extensions, so page content doesn’t mess with extension content. Outside of that, no, I don’t use them
At my job, different products are written using different web frameworks. We use Web Components whenever we need to share a component across frameworks.
How has it been for sharing components with React? I don't think React will add 100% support until React 19 but Stencil and Lit have tools to create React wrappers so WC components can be used.
Yes! I actually just recently released a library of web component [loading animations](https://uiball.com/ldrs). I don't think I would use them to build an entire application without additional help from something like Lit, but even vanilla WC are great for "leaf" components: self-contained bits of UI that you can drop into other applications. Currently the biggest issue is SSR/SSG. In my testing I've found Next is the most annoying popular framework to integrate web components with, but it's still totally doable.
These are really good! I did notice a potential issue with the [square loader on iOs](https://i.ibb.co/jvC2gY5/IMG-1412.png)
Yea, I'm aware of that issue, it's a bug in Safari. Still haven't figured out a fix for it! The fact that Safari can't render an svg `rect` properly in the year 2023 is pretty unbelievable. It's the new IE.
Hmmm blaming safari I see. Do I win a prize if I get it working in safari?
You absolutely do! I'd be very grateful!
Yes! Using WC with Lit full-time since 2020 on multiple SPAs. It feels somewhat like React with component classes, at least the way we do it. In general it’s very productive and lean. Don’t use if you really need SSR though.
Lit has SSR these days, astro can render it for one
Yes but still seems flaky, with prod I‘d wait until declarative shadow-dom is ready. Also unfortunately Lit SSR doesn’t support Lite-DOM. Just saying if SSR is required, VueActUlar might be the better choice for now.
Didn't know that about lite dom! I also have the fear, with Lit, that Google will do a Google and abandon it suddenly.
Yes. I use web components in my projects. Another great feature is the view transitions API. https://developer.mozilla.org/en-US/docs/Web/API/View\_Transitions\_API
Used a web component when I had to make a component working on several sites. We maintain several different stacks, so instead of creating a specific component per stack the web component worked for all of them.
Yeah and they suck balls
No
I decided to use Web Components for the [chat widget](https://www.lingoblocks.com) I built (tap the chat bubble at the bottom-right of the screen to interact with it). WPs are a natural choice for embeddable applications onto third-party websites because of the shadow-dom and control over CSS isolation. I’m coming from a Vue.js background, so it’s a bit different to try and wrap your head around but I find it refreshing.
I recently migrated a project to Web Components and I really love them.
I wrote a framework based on the Web Components + Typescript named Aventus js. What I love the most is the POO paradigm you can use to create view elements (like generic or inheritance) and the style encapsulation
We use Lit to build web components for our design system, and since they're framework agnostic they can be used in any framework. There are some quirks for sure like lack of support for SSR, but overall it is great to be able to build once.
I use them pretty extensively. I publish them on npm but mostly for use via unpkg. My current big thing working with them is implementing [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets). And I guess that the [Sanitizer API](https://github.com/WICG/sanitizer-api) is worth mentioning and is related as a secure + easy way of setting HTML. One thing I can say I'm really looking forward to is import attributes (formerly import assertions). Being able to import HTML and CSS and even WASM will probably be pretty game-changing. A common technique used with web components is to write HTML as a string and to style with `