loading...

Web Components 101

steinbring profile image Joe Steinbring Originally published at blog.jws.app on ・1 min read

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.

Posted on by:

steinbring profile

Joe Steinbring

@steinbring

I write PHP (mostly Laravel) and JavaScript (mostly Vue.js) by day and whatever interests me by night. I travel, have dogs, and enjoy playing with my ukulele.

Discussion

pic
Editor guide