Web Components: spoils of the browser wars
When discussed, “browser wars” typically has the connotation of our browsers fighting to get an edge on its competitors by developing or supporting new features. While the growing pains of this process have made designing for differing browsers sometimes tedious and unreliable, the war seems to finally be coming to an end and it’s time to reap the rewards.
In 2019, all modern browsers support ES6, which allows for rapid development and cleaner syntax without needing to transpile for the browser. The ease of advanced JavaScript also brings with it more developed APIs and tools to support anything the website needs within the browser.
The rise of modules in the browser necessitates better encapsulation and versatility with how we solve web problems with JavaScript, and one solution is a new technology called Web Components.
What are Web Components?
Web Components are made of different web technologies that allow you to create reusable custom elements, and they'll be just as native as a or element. These custom elements keep their functionality encapsulated away from the rest of the code, allowing them to just be dropped into any website.
The different technologies that make up Web Components are:
- Custom Elements: JavaScript APIs that allow you to define custom elements and their behaviour.
- Shadow DOM: JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element, which is rendered separately from the main document DOM. This shadow DOM controls the entire scope of the component, so you can keep an element’s features private and they can be scripted and styled without the fear of code collision.
- HTML Templates: The and
elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure. This essentially lets you “punch holes” in your component to let the native content of the page flow into or around your element.
The most handy thing about Web Components is how simple they are to define and use. To instantiate a new component with a shadow DOM, you simply implement the following:
- Create a class or a function in which you specify your web component functionality.
- Register your new custom element using the CustomElementRegistry.define() method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, from which element it inherits.
- Attach a shadow DOM to the custom element using Element.attachShadow() method. Then you can add child elements and event listeners to the shadow DOM using regular DOM methods.
- If needed, define an HTML template using and
. Again, you’d use regular DOM methods to clone the template and attach it to your shadow DOM. - Use your custom element wherever you like on your page, just like you would any regular HTML element.
Tooling
In response to this new development environment with new potential, a group of open source developers have created open-wc, which is a collection of generators, frameworks, documentation, and tooling for creating Web Components.
They establish a list of best practices that can help you get your first component off the ground, and I’ve found their resources to be very helpful in the rapidly-growing space. This is a relatively new project, so it’s a great opportunity to jump aboard if you’re seeking a new open source community on the web frontier!
The group was also featured today on the npm blog, so I highly recommend checking them out!
Resources
MDN: Web Components
Wikipedia: Browser wars
caniuse: Web Components