Web Components, Web’s Dirty Secret

Published in

codeburst

3 min readJan 9, 2018

Okay maybe not a secret…Web components are awesome and just not used as often as they should be. Sometimes we grab on to a framework or library too easily and lose simplicity of our projects. I am not slapping wrists here, I am quite guilty of this and libraries like React are awesome but not always needed. Web components give you a great way to build HTML elements with encapsulation and are an awesome and almost seamless merge between Javascript and HTML.

What are Web Components?

Web components can be a combination of custom elements, Shadow DOM, HTML imports, and HTML templates. HTML imports will not be covered as they are a bit controversial and Mozilla is coming forward with a better solution. I have attached some Gists but for a real working example but feel free to checkout out my full demo here: https://github.com/supercycle91/web-components-example

Below is my file app.js and it shows an example of a Class extended from HTML Element where we write out custom element. HTML Element is defined in the browser window and support is listed here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

Here is my index.html where I am invoking an instance of my new custom element with an additional Span tag. I added that secondary Span tag to show how CSS cannot affect outside elements. All these moving parts together make up our Web Component.

Why use Web Components?

Encapsulation and reuse. Now that is not all the reasons to use Web Components but they sure as hell are strong ones. By building encapsulated web components, we can call build HTML elements that can be shipped across your web app with their own implementation. These web components can not only have an encapsulated javascript implementation but also CSS if you incorporate ShadowDOM.

What is Shadow DOM?

Shadow DOM is a savvy way of saying an independent DOM and CSS. Before some would venture in the world of iFrames to get DOM and CSS encapsulation and boy does that get real ugly. The idea is the iFrames can unaffected by CSS on main DOM and therefore you could write your CSS to be shipped within the iFrame. Now forget everything I just said because this is quite a hack IMO. Shadow DOM brings this awesome ‘separate DOM’ feel and isolates CSS. What works well for most is to create a Web Component with it’s own Shadow DOM and write the CSS for that component to only that Shadow DOM. This gives a nice scoped and encapsulated CSS to our Web Components.

customElements API

The customElements is where the ‘rubber meets the road’ and all the magic happens. By using my example above, we can register our component to the CustomElementRegistry. Once registered, we are free to use instances of our Web Component in HTML markup.

Conclusion

Use of Web Components are almost limitless and my depth was intentionally shallow. If this is all new to you then you should pull down my repo and play around.