Web components

In short: Web components are custom HTML elements that the browser supports natively, without a framework. You define, for example, <my-button> and use it anywhere.

In more detail: Three browser technologies stand behind it: custom elements (own tags with own logic), shadow DOM (encapsulated markup and styling) and HTML templates. Together they form reusable building blocks.

In Depth

• Custom element: A class that extends HTMLElement, registered with customElements.define("my-button", Class). Names must contain a hyphen.
• Shadow DOM: Outside CSS does not reach in and vice versa. This prevents style collisions.
• Lifecycle: connectedCallback, disconnectedCallback, attributeChangedCallback.
• Advantage: Works in any framework and without a build step.
• Disadvantage: Server rendering and forms are more cumbersome than in frameworks.

See also: Semantic HTML