Web Components!

Constantine Kaganis — Mon, 27 Apr 2020 02:21:46 +0000

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. If you are familiar with building components in libraries like React or Angular, Web Components should feel similar. Thanks to them, developers are no longer limited to the existing HTML tags that the browser vendors provide.

The three main building blocks of Web Components:

Custom Elements
Create custom HTML tags
Create Custom Class
Lifecycle methods available

Shadow DOM
Used for Self-Contained components
Encapsulates styles and markups
Create with element.attachShadow({ mode: open})
Creates a ShadowRoot that can be referenced and interacted with

HTML Templates
Define the encapsulated markup of our web component
Template tag stores markup on a page
Include both HTML and CSS in templates
Use slots to add custom text

HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera. Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some Blink-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are implemented in Safari, Google Chrome, and Mozilla Firefox and are in development for Microsoft Edge. Backward compatibility with older browsers is implemented using JavaScript-based polyfills.

Web Components are amazing. It is a great addition to the coding world! A business could really benefit from adding them to their webpages.

Youtube Video: https://youtu.be/1ic4ERh7F00

DEV Community: Constantine Kaganis

Web Components!