News for hackers. Stuff that matters.

Ask HN: Anyone know of any largish applications built with WebComponents?

In case you don't know, Web Components are kind of like "React built-in to the web browser".

I've been reading up on Web Components and they sound really interesting. It's like web browsers have an equivalent tot React built in.

I'm curious now to have a look around the code base not just of small examples, but of something larger.

I'm curious to know how a complete application would be architected around Web Components.

Know of anything?

Have you built something substantial primarily around Web Components - if yes, what did you think? Pros and cons?

( 9 comments | 20 points | on HN )
Re:Ask HN: Anyone know of any largish applications built wit... by matsuuu on Wednesday May 04, 2022 @07:20AM (#31258967)
There's plenty of production grade applications running Web Components.

A good list of companies using them in production can be found here: https://arewebcomponentsathingyet.com/

A large example on a huge application using web components is Photoshop's browser version: https://web.dev/ps-on-the-web/#web-components-and-lit

Re:Ask HN: Anyone know of any largish applications built wit... by westbrook on Wednesday May 04, 2022 @07:45AM (#31259175)
Oh hey, that me! We at Adobe are investing heavily in web editors built with web component technology. Not just Photoshop, but Illustrator, Lightroom, and a number of brand new or in development applications across the company, as well.

We’re also leveraging web components to support interoperability of our design system across teams who still choose to use frameworks or have been using them all this time. In this way we ship https://opensource.adobe.com/spectrum-web-components/ and teams like fonts.adobe.com that have a long standing Angular app, or edex.adobe.com with their long standing Vue app or various recent acquisitions with their own technical decisions, can all consume Spectrum design without shipping their own implementation or rewriting their app to another stack.

The ease of building at depth scale for large applications and at breadth scale for applications no matter their architectural decisions has been a huge win for Adobe and our goals to drive consistency and quality across the company. The speed and scope at which we’ve been able to do so just wouldn’t be possible without web components.

Re:Ask HN: Anyone know of any largish applications built wit... by andrewstuart on Wednesday May 04, 2022 @06:54AM (#31258790)
Never mind - I've just discovered Web Components are not supported at all on Safari, which sinks the idea of Web Components being a viable alternative to anything.

https://caniuse.com/?search=web%20components

Here's the reasoning from Safari developers: https://bugs.webkit.org/show_bug.cgi?id=182671

Re:Ask HN: Anyone know of any largish applications built wit... by WickyNilliams on Wednesday May 04, 2022 @07:17AM (#31258949)
They are supported! Safari does not (and will not, as explained in your link) support one specific API for web components, the `is` attribute:

    <button is="my-button">
But when people talk about web components, they are almost certainly talking about this kind of component:

    <my-button></my-button>
Which is fully supported in safari. The former can be polyfilled, but i doubt (m)any components are being developed like that.

Aside from this, safari has great support for WCs and is just as capable as any other evergreen browser.

Re:Ask HN: Anyone know of any largish applications built wit... by andrewstuart on Wednesday May 04, 2022 @07:23AM (#31258997)
I cannot see that Safari supports the "connectedCallback" in Custom Elements, which seems to be to be foundational to the entire technology.

https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

If you're correct about Safari's level of support can you referf me to where it supports connectedCallback?

Re:Ask HN: Anyone know of any largish applications built wit... by WickyNilliams on Wednesday May 04, 2022 @07:40AM (#31259125)
The proof, as they say, is in the pudding: https://codepen.io/WickyNilliams/pen/dydoNez

It's been supported for years AFAIK. As long as you extend HTMLElement, and not some other element, everything will work as expected

Re:Ask HN: Anyone know of any largish applications built wit... by bennypowers on Wednesday May 04, 2022 @10:13AM (#31260707)
should have posted this in r/confidentlyincorrect

Yeah, here's my youtube video from 3 years ago preemptively proving you wrong

https://www.youtube.com/watch?v=Vz433mJR2ow

Re:Ask HN: Anyone know of any largish applications built wit... by RoXuS on Wednesday May 04, 2022 @09:15AM (#31259923)
https://youtube.com/ is on web-components.
Re:Ask HN: Anyone know of any largish applications built wit... by bennypowers on Wednesday May 04, 2022 @10:14AM (#31260727)
SpaceX Dragon capsule's screens

Wordle

Photoshop

GitHub - Freaking GitHub!

Nintendo's website

Salesforce

Innumerable startup SaaS dashboards