Web Components

Introduction
Specifications: Four main specifications
- Custom Elements: lays the foundation for designing and using new types of DOM elements.
- Shadow DOM: defines how to use encapsulated style and markup in web components.
- ES Modules: defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
- HTML Template: defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
Libraries
- Hybrids is a UI library for creating Web Components with simple and functional API.
- LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes.
- Polymer provides a set of features for creating custom elements.
- Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance.
- Stencil is an opensource compiler that generates standards-compliant web components.

Articles/Blog Posts

Tags: presentation browser

Last modified 15 September 2025