What if you could create components based on existing web standards, components that do not depend on the framework or library used to glue everything together into an application? That is where Web Components come in.
Who is Using Web Components?
Here are a few companies you may have heard of that implement Web Components:
Google: many properties including the AMP web component framework (source)
Salesforce: Lightning Web Components (source)
Twitter: Embedded Tweets (source)
GitHub: The “Updated ago” (source)
YouTube: The site is built using Web Components (source)
Let’s dive deeper into how Electronic Arts (EA) uses Web Components. (source)
EA is one of the largest game companies with over 22 studios and 10,000 people in 30 locations all over the world. Needless to say, they release a lot of games (NBA Live, Star Wars, The Sims, Battlefield, etc).
In the beginning, the web team took the approach of designing and developing each game’s website independently, one site at a time. As you can imagine, this leads to a lack of a coherent experience for users browsing all the games EA offers. It was also difficult for the designers and developers working on the sites. They were spending 80% of their time on “Commodity Web”, (i.e. navigation, footers, and media galleries) instead of building custom experiences for each game title.
To invert that ratio, The Network Design System (NDS) was created. With the NDS, they were able to take the Commodity Web components and add:
- Theming capabilities
- Ability to integrate with any language and framework
- Support for their Micro-site Architecture
- Delivery as a User Interface as a Service (UIaaS)
And you know who else has most likely used Web Components?
You. Have you ever wondered how is it possible that you can just set the ‘src’ attribute on a
<audio> and have a fully functional player with buttons, volume control, progress bar, timer, and other options? Web Components.
Let’s look at an example that’s just as easy to use, but has a lot more happening behind the scenes—the model-viewer Web Component developed by Google.
Here is the code needed to display a 3D model:
<!-- Import the component --> <a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a> <a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a> <!-- Use it like any other HTML element --> <model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>
With a simple HTML tag, you can embed a 3D model without needing to know WebGL and the WebXR Device API.
Here is the model-viewer Web Component implemented within and without a framework / library:
What Makes Up a Web Component
Hopefully seeing who is using and what can be created with Web Components now has you wanting to know how to create your own.
As stated before, Web Components are built on Web Standards. These low-level APIs consist of:
- Custom Elements
- Shadow DOM
- HTML Templates
Custom Elements API: Allows you to register a custom element on the page.
- Must include a hyphen/dash (kebab-case) i.e. my-custom-element. No single word elements to prevent name clashes.
- It’s a class object that defines its behavior.
- Also determines which, if any, built-in elements the custom elements extends i.e. input (HTMLInputElement), button (HTMLButtonElement), etc.
Shadow DOM API: Facilitates a method to attach a separate DOM to an element
- It provides encapsulation to keep the style, structure, and behavior separate from the outside code. It helps to “...contain the gross” - Paul Lewis (source)
- Allows for the remapping of events i.e. turn a click event into something more meaningful.
HTML Templates API: Creates a flexible template that will be inserted into the custom elements shadow DOM.
- Used to efficiently render HTML and update it when the user interacts with our web component.
- For more complex templates, it may be easier to use a library, framework, or tool.
Here’s an example Web Component I wrote with comments to help explain what is going on.
If you're wondering about browser support, Web Components are supported in modern browsers.
For older browsers, you can use polyfills: https://www.webcomponents.org/polyfills
At Vonage, we are creating Web Components to build a Design System like Electronic Arts mentioned earlier. Our goal is for users to be able to easily assemble components to build things like chat applications without having to worry about what is happening behind the scenes.
Here are some resources for more information on Web Components:
The Web Component example I made was a simple one. As the complexity of a component grows, using a tool may make development easier. In the next blog post, we’ll be comparing different frameworks and tools that create Web Components.