What are web components?
Web components are comprised of a series of web specifications created by the W3C. These specifications describe a set of web platform APIs that can be used to create reusable, encapsulated, and customizable HTML elements. By exposing the low level web APIs used by browser vendors to create the HTML elements you may already be familiar with, web components can be used across a variety of environments. This means whether you're working on a Wordpress site, a server rendered application, a Single Page Application (SPA) with the latest framework, or no framework at all, web components can be used. For the first time, regardless of what framework is used, you can understand the web as a platform to creature unique experiences that are easily translated from one platform to another.
Web Component Specifications
Web components are defined in four main specifications.
- The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
- The Shadow DOM specification defines how to use encapsulated style and markup in web components.
- The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
- The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.