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.
See the Pen
Web Components 101 by Joe Steinbring (@steinbring)
on CodePen.
In the above pen, there are two examples. The first one (<js-description>Content</js-description>) uses a custom element (defined in JavaScript using 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.