What Are Web Components?
Web components work like Lego for HTML. They are a collection of technologies that help make HTML more useful and reusable. For more background, check out the W3 Web Components specification and the Mozilla Developer Network’s page on Web Components.
These technologies are:
- Custom elements
- HTML Templates
- The Shadow DOM
- ES Modules
Let’s take a look at these in turn.
Templates are reusable chunks of HTML. They’re great for items that go in multiple places or on multiple pages like headers, footers, and menus.
The Shadow DOM
The DOM is the glue that binds what you see in the browser to the HTML code The Shadow DOM is a part of the DOM that lets you keep markup, style, and functionality separated.
Web Components With a Framework
The easiest way to start using web components is with a framework. Before web components were even around, Angular.js provided a similar functionality called directives. They did a lot of the same work as components, before components became a standard.
Vue.js is a popular component-based front-end framework that is a favorite among developers. Vue is easy to learn and easy to program. The framework also makes it easy to add simple components to basic HTML websites.
To learn more, have a look at our roundup of tutorials for learning React to make web apps.
Web Components Without a Framework
Polymer has a library for polyfills to ensure compatibility with older browsers. There is also an early release of material design components to add material design to plain HTML.
Another option is Slim.js, an all-in-one library that makes it easy to add to a simple website. It streamlines the custom element creation process and provides direct access to the shadow DOM.
Last but not least is the excellent Stencil, which gives you the best of both worlds. It’s similar to React and provides a lot of the same functionality. But it gives you that framework-level functionality without locking you into a heavy-duty framework.
Web Components and Web Design
One of the major hurdles of using components is the loss of design frameworks, like Bootstrap. Technically, you can use Bootstrap with a component-based website. And there is a Bootstrap port for React. But if you want to use something like Stencil or Vue, you may be unhappy with the lack of compatibility between your components and the framework.
Traditional Web Design Frameworks
The good news is that there are several design frameworks to choose from. Vaadin provides some beautiful components. For an enterprise flavor, there’s OpenUI5. And as mentioned already, Google’s Polymer offers Material UI components as well.
The bad news is that you won’t find the same experience that you get from Bootstrap in any of those frameworks. And they’re missing many elements you see in most design frameworks, like typography.
What Is the Component-Based Design Framework Approach?
A different technology, like web components, deserves a different approach. Tachyons is the best approach. It’s easier to use for designers, but it can give developers a solid and clean foundation. Tachyons is mobile-first and provides a consistency of design that’s subtle yet generates beautiful results.
Tachyons breaks down CSS classes to the smallest possible use. For example, this is how you create a button using it:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
In most design frameworks, you’d give the link a class of button and another class to round the corners. In Tachyons, you choose your padding, border, color, etc. on the fly. All the abbreviations may seem complicated at first, but they follow a consistent naming pattern that’s easy to learn.
The smallest possible class is an approach that doesn’t work for traditional websites because it clogs your HTML classes. But with component-based architecture, you’re probably going to use that same button over and over throughout your app. That means that you only need to create that button once for your whole website.
Thinking in Components
Another hurdle is getting your brain to change gears from traditional website layouts to component-based structure. There are two techniques to help you learn to think in components.
The Atomic Approach
Think of a web page as an organism. The parts like the hero section, price guide, and user reviews are like the cells of the organism. These are pieces that you can safely move to their own components, whether you reuse them or not.
The buttons, headers, and quotes are like atoms. Atoms are the smallest possible part. When it doesn’t make sense to break a component down further, that’s an atom. These are usually components that you’ll use over and over throughout your project and possibly between projects.
The DRY Approach
Or you can just forget all that organism, cell, and atom nonsense and keep it DRY. DRY stands for Don’t Repeat Yourself.
Anything, big or small, can be a component. So just write your HTML as usual. When you find something you want to reuse, like a gallery or footer, break it out into its own component.
Should You Use Web Components in Your Next Project?
The main points to consider are your team and web standards.
All major browsers have adopted web components. CanIUse rates custom components at a 93 percent adoption rate and templates at 95 percent, so they’re safe to use. And there are polyfills for the few stragglers that don’t support web components. That means that compliance is a non-issue.
The hardest parts of adopting web components are the shortage of design frameworks and learning to think in terms of components. But we’ve covered both of those. Web components have been around since 2014, so they aren’t a new technology. But they are a better technology.