Introduction to Web Components

Web Components

Web Components are a suite of different technologies allowing the creation of custom elements with encapsulated functionalities to be used in web apps.

This is very similar to creating components in React, Vue, or Angular instead of relying on a specific JavaScript framework it leverages technologies natively provided by the browser so that your Web Components are framework agnostic.

The styling can be encapsulated using the Shadow DOM which makes your component ignore any styles applied outside of it. So it does not affect the outside CSS.

Building blocks of a Web Components

-         Custom Elements

 These are the same as other HTML elements such as div, article, etc. but with custom templates, behavior, and tag names definer as per requirements.

-         Shadow DOM

• It's encapsulated version of DOM, specific to the custom element. A component’s DOM is self-contained (e.g. document.querySelector() won’t return nodes in the component’s shadow DOM). This also simplifies the CSS selectors across your web app since DOM components are isolated, and it gives you the ability to use more generic id/class names without worrying about naming conflicts.
• CSS defined inside shadow DOM is scoped to it. Style rules don’t leak out and page styles don’t interfere with it.

-         HTML Template

• It is reusable HTML code specific to custom elements, User-defined templates in HTML that aren’t rendered until called upon, and fragments of markup that go unused at page load, but can be instantiated later on at runtime.
• The <template> tag is defined in the HTML Living Standard specification
• We can implement reusable HTML structure using <template> and <slot> elements.

Custom Elements Lifecycle Methods

• connectedCallback: Invoked when the custom element is first connected to the document's DOM.
• disconnectedCallback: Invoked when the custom element is disconnected from the document's DOM.
• adoptedCallback: Invoked when the custom element is moved to a new document.
• attributeChangedCallback: Invoked when one of the custom element's attributes is added, removed, or changed.

Check the implementation on the below link:

https://jsfiddle.net/z5kh29o3/

- Benefits for the project

• Brand consistency: Having your front-end application code split up into component libraries or even design systems can ensure brand consistency through the organization. It also provides an additional benefit of the ability to be used by all teams, regardless of tech stack.
• Cost-efficiency: 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, which in the end saves money;
• Faster deployments: Having ready-made code blocks, developers will be able to build and deploy applications more quickly. This leads to less time devoted to developing new features;
• Quality improvement: As a by-product of reusing and reviewing the same code multiple times, the overall quality will improve in the course of time.

How to use web components?

To use a custom element you can simply import it and use the new tags in an HTML document. The ways to install custom elements, though can vary. Most elements today can be installed with NPM, but looking at the README for the commands to install the specific element is recommended. NPM also handles installing the components’ dependencies. For more information on NPM, see npmjs.com.

Generally speaking, using a custom element is no different to using a <div> or any other element. Instances can be declared on the page, created dynamically in JavaScript, event listeners can be attached, and so on.

•  “Web Components” MDN web docs
• “Building Components” Google web fundamentals
• “Web Components” Modern JavaScript tutorial
• “WebComponents.dev” Web Components playground