A year working with HTML Web Components

Also see HTML Web Components, which is more on the philosophical side of things.

"HTML web components" are "custom elements", while "Web Components" is a collection of APIs.

a web component architecture that focused exclusively on using the custom elements API, and nothing else from the “web component” bucket of APIs. Fast-forward a year, this method of building web components has been pushed forward and finally has a name. The core premise of HTML web components is to write HTML as you would normally and then “enhance” it by wrapping the parts you want to be interactive using a custom element tag.

HTML web components are islands.

the custom element tag acts as a sort of box of interactivity –– any HTML you put inside of that box can be made interactive using the powerful lifecycle methods and functionality that the custom element API provides.

The post touches on Stellar, a framework for building HTML web components. A convincing argument Stellar makes is to store state within the HTML, rather than within the JS.

State should start on the server. An intentional goal of this model is to be extremely SSR-friendly and align (mostly) well with hypermedia-driven principles. While the above examples demonstrate handwriting state directly inside HTML elements, the real use case and goal is to declare initial state in your server and pass the state into Stellar components using the templating language of your server framework.