When working with frameworks like React, Vue, Svelte or Angular you encapsulate your UI in “components” that can be invoked by an HTML tag with the components name. This pattern has become the norm, the downside is to use these frameworks you have to bundle in the framework with your project increasing your bundle size and client initial load times (Since there are used for Single Page Application, speed is quite fast after the initial load).
In the last few years browser APIs introduced their own methods to create components without the need to load external libraries and frameworks, these are referred to as Web Components. This API is generally made up of several parts.
Template — The Template HTML tag allows us to define pre-defined bundles of HTML that can be assigned later on. Templates can include a slot element that allows children of a web component to appear in the component.
CustomElement — by extending the HTMLElement class you can define your own custom element which you can register with the browser and use as HTML tags.
ShadowDom — Allows an element to get it’s own separate DOM separate from the document. Element in the shadow dom isn’t accessible via the document (you’d use element.shadowRoot.queryselector vs. document.querySelector). This facilitates great encapsulation of styles so styles internal to the component don’t collide with global styles and vice versa.
To learn the basics of creating a Web Component check out this playlist of tutorials I made.
As with any API, libraries and frameworks have been created to give developers the ability to do more faster, here are some of the major ones.
Lit-Element — Google originally created the Polymer framework to create web components and later shifted reworked it into a tagged template literals called “lit-html” which under the hood tries to only re-render changed parts of the template. These templates can then be used in creating custom elements using the base class “LitElement”.
Lightning Components — Salesforce has created its own library for working with web components that allow salesforce developers to use web components in their projects.
StencilJS — Ionic has created the StencilJS compiler that allows you to create web components using Typescript and JSX giving an experience that is a cross between Angular and React development. The compiler then compiles your code into a portable web component you can use in your projects.
MercedUI — This is a library I created that allows you to create components using a Base Class called “MercedElement” that out of the box gives elements access to reactive state, props, and redux like global state management. The library also includes the FormTool class that makes working with forms very easy and a router component similar to react-router all in web component form. About 14kb Library.
ComponentZoo — A Library that includes several components base classes (including MercedElement), the router element, the FormTool turned into a web component and a base class to make styling components similar to React’s Styled Components. About 10kb Library.
BasicElement — This library only has a baseclass that adds reactive state and props to your web components and nothing else. Less than 1kb.
FunComponent — This library brings to the table a function that gives you all the power of web components in a simpler, more concise functional syntax. About 3kb library size.
Aside from allowing web component design without large libraries, web components also enable the creation of components that can be portable between frameworks which enables more cooperation between teams using different frameworks for different applications.
Top comments (0)