Bird’s Eye View on Web Components

Published in

McKinley & Rice

3 min readMar 31, 2020

Web components are great! Approximately a year ago, I was working on two Separate Angular and React Frontend projects in a Yarn Monorepo Workspace Setup where there were a lot of components that repeated in both the projects. Hence, my team and I decided to make the common components in Web Components using Lit-Elements. Here, I compile my key learnings about Web Components to enable community learning from it.

I would be covering 3 content topics today which are as follows:

Web Components Introduction
Polymer project
Lit-Element

Introduction

Web components are a set of standards for creating reusable HTML elements. They are also a standard included in the HTML specification, meaning they have native support. Traditional HTML doesn’t allow importing and modularizing code. Web components are neither a framework nor a library. But, you can use web components alongside all the existing JS Frameworks like ReactJS, Angular & Vue. Check this link out, if you want a great resource of pre-built and ready-to-use web components: https://www.webcomponents.org/

Web components carry little to no dependencies. The four areas of web components are:

HTML Imports

Chrome has a native implementation, but other browsers are looking to use Javascript ES6 modules (with a polyfill for HTML imports).
webcomponents.js was made to polyfill the web components
Polyfill is a code that implements a feature on web browsers which otherwise don’t support that feature

HTML Templates

Custom Elements

Shadow DOM- Think of it as a scoped DOM subtree inside your element

Google’s Polymer Project

Polymer Js is a small wrapper built on top of web components with a few extra goodies
It uses Javascript
One of the advantages of using Polymer is that it has a built-in data binding model
It supports all browsers using polyfills

Lit-Elements https://lit-element.polymer-project.org/

LitElement makes it easy to define Web Components.
It uses a familiar class-based implementation.
You can use your components anywhere you use HTML: in your main document, a CMS, Markdown, or a framework like React or Vue.

There is a starter project PolymerLabs/start-lit-element: Hello World app for LitElement which you can go through to get an overview of it. Follow the ‘Getting Started’ available on their website https://lit-element.polymer-project.org/try/create

Coming to my thoughts on this topic- why exactly should you be using Web Components?

Many of the B2B Applications do not need a lot of Native functionalities. Progressive web applications with web components can be a perfect solution for such cases, giving them an iOS, Android and Web Application.
It helps in building brand consistency- Build Once & Use in All Projects.
Business Perspective: It saves money! Developers will have the ability to focus solely on making native reusable components, similar to legos, and use these blocks in other applications across teams.

I hope this article could ignite your interest in Web Components. If you are interested in reading more about it, please go through the following links:

Thank you!

Bird’s Eye View on Web Components

Written by Shubhi Dubey