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 (<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.
Top comments (0)