Developing Websites in Components

Introduction

What are web components?

Web Components are a suite of different technologies, implemented with the web platform APIs, that allows us to create custom reusable and encapsulated html tags to use in webpages and web apps. In other words, web components are a collection of open source technologies such as JavaScript and HTML that allow you to create custom elements that you can use and reuse in web apps. T

Web Components do not require any 3rd party libraries or frameworks but can certainly be used with them.

The building blocks of web components

The building blocks of web components can be practically factored into three:

The custom elements, the Shadow DOM and the HTML Templates.

1. The Custom Elements. The Custom elements give us the capability to create our own custom html tags, extend html tags and make lifecycle methods available. There are four (4) custom elements lifecycle methods, and these include:

   • constructor(): called when an instance of the element is created or upgraded
   • connectedCallback(): called everytime the element is inserted into the DOM
   • disconnectedCallback(): called everytime the element is removed from the DOM
   • attributeChangedCallback(attributeName, oldValue, newValue): called when an attribute is added, removed, updated or replaced.

2. The Shadow DOM: This is basically self-containment. It allows us to contain all of our HyperText Markups and styles in our custom element, that our custom element is basically it's own entity set apart from the regular DOM (Document Object Model). In this case, the styling in here is separate from the global CSS of the webpage/app.

3. The HTML Templates This is basically how we define our encapsulated markup of our web component on page load. The template tag allows us to store some markups on a page that can later be cloned and reused, which include both the HTML and CSS of our template.

slots in template help to make template dynamic by allowing us to add custom texts and outputs to our template.

References

Original file was posted here: github.com/devpishaili/web-components

Acknowledgement

Dev P Academy.

Thank you for engaging! 🎉