2 ms·

Exactly, you can see that the webcomponent I linked is microfrontend. Interestingly, I first ported the code to StencilJS, but then it seemed the framework actu

Exactly, you can see that the webcomponent I linked is microfrontend. Interestingly, I first ported the code to StencilJS, but then it seemed the framework actually got in my way and I removed it, I prefer the code as is now and there's not even a build because it's vannillajs. You just add the script tag in your page and start using the <autocomplete-light...> tags with your options. I used the mdn custom element documentation without any framework.

JMTQp8lwXL 6y ago
I like what I'm seeing in Web Component technology, but it's not fully there for me yet. Suppose your base Design System is web components. Most Microfrontend (MFE) teams will still pick up an off-the-shelf React, Vue, Angular, etc. But VDOM and web components don't always play nicely. If you have Parent-Child web components, specifically 1 parent with N-immediate children, React can't resolve this gracefully. Every render past the first breaks with Stencil. That's a pretty significant issue, because (very) common components like Select dropdowns are modeled as 1 parent with N immediate children. So you can't any longer stay in React's declarative model. The workaround (last comment in issue) has you writing imperative code to fix the problem. It has that "using D3 in React" vibe to it. It works, but it's not nearly as elegant as if you had, say, a React-based Design System (but then, of course, all your MFE teams must use React). https://github.com/ionic-team/stencil/issues/2259 https://github.com/ionic-team/stencil/issues/2259 Users have also reported the same analogous issue exists for using Web Components in Vue too, so it's not even a React-specific shortcoming. https://github.com/ionic-team/stencil/issues/2259#issuecomment-661086558 https://github.com/ionic-team/stencil/issues/2259#issuecomme...
- 1337shadow 6y ago
  I don't think it matters so much for React/Angular/Vue to support web components because they will be dropped in favor of vanilla js just like jQuery has, thanks to Custom Element which is recommended for MFE, and ESM which will likely be. Mixing different frameworks is a promise that I don't care about, but you got some pretty interesting feedback about it, seems like it might as well take a few years of effort.

JMTQp8lwXL 6y ago

I like what I'm seeing in Web Component technology, but it's not fully there for me yet. Suppose your base Design System is web components. Most Microfrontend (MFE) teams will still pick up an off-the-shelf React, Vue, Angular, etc. But VDOM and web components don't always play nicely. If you have Parent-Child web components, specifically 1 parent with N-immediate children, React can't resolve this gracefully. Every render past the first breaks with Stencil. That's a pretty significant issue, because (very) common components like Select dropdowns are modeled as 1 parent with N immediate children. So you can't any longer stay in React's declarative model. The workaround (last comment in issue) has you writing imperative code to fix the problem. It has that "using D3 in React" vibe to it. It works, but it's not nearly as elegant as if you had, say, a React-based Design System (but then, of course, all your MFE teams must use React). https://github.com/ionic-team/stencil/issues/2259 https://github.com/ionic-team/stencil/issues/2259 Users have also reported the same analogous issue exists for using Web Components in Vue too, so it's not even a React-specific shortcoming. https://github.com/ionic-team/stencil/issues/2259#issuecomment-661086558 https://github.com/ionic-team/stencil/issues/2259#issuecomme...

1337shadow 6y ago
I don't think it matters so much for React/Angular/Vue to support web components because they will be dropped in favor of vanilla js just like jQuery has, thanks to Custom Element which is recommended for MFE, and ESM which will likely be. Mixing different frameworks is a promise that I don't care about, but you got some pretty interesting feedback about it, seems like it might as well take a few years of effort.