Web Components are a set of technologies that allow you to create reusable custom elements with functionality encapsulated away from the rest of your code. This allows you to define something like
<js-modal>Content</js-modal> and then attach behavior and functionality to it.
In this post, I want to explore how web components do what they do.
In the above pen, there are two examples. The first one (
customElements.define()). It is definitely useful but if you look at the second example (
<js-gravatar>Content</js-gravatar>), there is now a
<template> element that allows you to define what is within the custom element.
I plan on building on some of these concepts in a later post. Have a question, comment, etc? Feel free to drop a comment, below.