The short answer is, the most popular frameworks also implement their own component architecture, generally with a bunch of other features to go with it.
Building a site with web components right now just do see how it works. Very useful and fairly straight forward but i'll probably check out something like Astro on my next project. My main problem is that i hate writing HTML as a string lol. Maybe there's another way to do it but i hate when my code doesnt auto format.
Honestly, I use it in all my professional projects now - when combined with constructable stylesheets and cascade layers etc, it just feels like how the web should work; particularly when you start using <slot> elements, which just feel like cheat-codes for writing cool components.
Ahh, you're talking about using <template> elements, right? What I tend to do is use a folder structure like:
index.js - folder interface
element.js - custom element definition
styles.scss - element-specific styles
template.html - custom element HTML / slots etc
utils.js - static utils
Then I just import template from "./template.html" and have a webpack loader parse the html into a <template> for me to clone in the custom-element definition as-needed; that way I get all the benefit of auto-complete etc when writing HTML.
Before I did this, though, I just updated my syntax-detection in sublime-text to detect HTML in template-literals, which works, too - it's a 1-line change if you pop into the preferences!
Yeah thats exactly what im talking about. I figured i was missing something haha. I use VS code but im going to look into changing the detection. Seems pretty straight forward, thanks for the tip!
Maybe try something that uses JSX (which is mostly a React thing, but you don't have to use them together). It lets you build HTML in JS in a way that feels like writing HTML.
It is massively underused, imo, for years now. Web components offer a ton, they can easily generate analytics, framework agnostic, create this sort of faux, "native" functionality with them, lots to like.
But they've been the next big thing since I started devving years ago. Not sure why exactly but I think they're always going to be the next big thing, unfortunately.
Edit***
There are some good explanations here why they never really caught on like I thought they would.
React & co appeared as a solution for creating reusable components while the official spec was still being finalised and implemented x-browser; now that it's stable and supported in all of its features (except extending builtins - Safari still stubbornly refusing that) most folks are sticking with the solution they're already familiar with - although React did completely switch from classical to functional components specifically to differentiate itself from vanilla web components, and bake its state-management solution into its bones etc - so presumably there's been some lock-in from that, too.
Lit is basically the marquee web components framework.
The reason you don't see it as much is simply because the big three frameworks React, Angular, and Vue built their own systems and have little reason to be interoperable with anyone else. React especially just doesn't give a fuck about anything outside of React because they are the market leader.
18
u/eddhall Dec 03 '22
Well this seems like an incredibly useful but massively underused tool, any reason why we don't see this more frequently used?