Web Components

Web Components are a polarizing feature that seem simultaneously old news and not quite ready for production yet. But we’ve been making things with Web Components, and finding some areas where they really work well. Join us to hear more about how we’re using them, what they work well for, and why we’re excited about them.
- When did Web Components “click”
- How to incorporate progressive enhancement
- Future Web Components projects
- What is still missing from Web Components?
- Thoughts on lit
Links and Demos:
Slide-deck
github.com/odd...
Ground control
github.com/mir...
is-land
github.com/11t...
fundraising-status
github.com/zac...
An Attempted Taxonomy of Web Components
www.zachleat.c...
Progressive Enhancement Recipes using Eleventy WebC Image Comparison Components -
demo-webc-imag...
Zach Leatherman
www.zachleat.com/
I Need Your Help to Make 11ty Fully Independent and Sustainable in 2024
www.zachleat.c...
Eleventy
www.11ty.dev/
Web Components Discord / discord

[@tobiasfedder1390]

Miriam and Zach are going to build a W3C Web Annotation Web Component; that's what I heard - I'm definitely not misconstruing what has been said here. All we need to do is find unlimited resources. Great conversation. I like the idea of a web component taxonomy as well as differentiating between standalone custom elements - meant to be available to every website - and bundles of custom elements with shared dependencies coming from design systems - meant to be used together.

[@zettadam]

If I understand it correctly, to use a custom element (say web component) that I created, doesn't the browser have to download extra JS code and register it using DOM API (that is JS, again)? How is this better when it comes to loading performance than using a React component?

[@JamesStuckeyWeber]

You're correct that you have to download and register the custom element, but when you use a React component, you also have to download and run React. So overall, the download size should be much smaller, and you should need to run much less code overall, when using a custom element. I haven't seen a benchmark comparing the two, but I'd love to see one!

[@ZachLeatherman]

Additionally, it should be noted that shared library code for Web Components is an order of magnitude smaller than React + React DOM, if you don’t want to go full dependency-less like I aim for