Building Web Components

I have had some spare time while learning how to work as a free lancer. I have filled that time by getting involved in projects like Code for Philly and learning more about web components.

Web components have been really interesting to learn about. Here is a little bit of what I have learned after creating two open source web components: webapp-menu and backstack.

Benefits

Encapsulation is one of the big benefits of using web components. Those 15 <div> tags that were needed to get the right behavior no longer have to clutter up the DOM. The can be hidden inside the shadowDOM of the component leaving the DOM much cleaner and easier to understand.

Using the shadow DOM also isolates your CSS. Only the styles you explicitly define or import into the web component are applied to elements in the shadow DOM. This prevents other CSS from bleeding into your component and causing unwanted side effects. It also prevents your styes from bleeding into other unwanted areas.

Getting Started

If you want to try using some web components in your next project, check out webcomponents.org.

If you want to build your own web component, I recommend looking at Open WC. They have a number of NPM packages which can help simplify the build and testing process for your web component.

And definitely go take a look at the two web components I have published: webapp-menu and backstack.