The good, the bad, the web components | Zach Leatherman

An excellent overview of the current state of web components, including suggestions on how they could be improved.

On the current popularity (and success) of web components:

In August 2023, Chrome Platform Status reports that 19.4% of page loads in Google Chrome were using a web component (via the CustomElementRegistryDefine key). For comparison <img loading>

On the simplest form of web component, a Custom Element (or HTML Web Component):

Custom Elements allow you to attach a JavaScript class to any custom element you define on your page, to add behaviors and JavaScript-generated content to any element instances on the page.

On the downside to Custom Elements (not very DRY):

Multiple instances of the same component need to repeat the same nested content and any changes to nested content need to be applied manually to all instances.

On the Shadow DOM, the next step up in terms of complexity:

Shadow DOM is the next level of our web components evolution. It solves the developer experience problem with repetition in authoring markup at the expense of clientside rendering 😭.

On how Declarative Shadow DOM is just several Custom Elements in a trench coat:

[Declarative Shadow DOM] solves the clientside rendering dependency for Shadow DOM but at the expense of repetition in authoring markup! The ol’ switcheroo (in some ways) feels like a de-evolution back to the approach we discussed in Custom Elements!

Explore Other Notes

⬅ Newer

The two Reacts

A very well written overview of when client-side functionality and server-side functionality make sense to use for a […]
  • An excellent overview of the current state of web components, including suggestions on how they could be [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.