First, what are we talking about when we use the term web components? In the context of Drupal, we could mean a suite of modules, a Twig template that can be inserted into other templates in a theme, and more.
Should you use Web Components in your Drupal project? It depends. Once you learn about them, you can be tempted to use them for everything. We get it. They’re neat and new and provide a lot of benefits. However, some downsides could grind your development pace to a halt.
The benefits of web components
In our experience, here are some benefits we have identified.
- Platform agnostic. Web components are native to the browser. You can build a component once, use it wherever, and don’t have to worry about compatibility with other platforms. Theoretically, you can take your custom tags and start using them. One client uses web components for a global navigation feature that works across several different CMSs and React apps.
- Backward compatibility. Updating a web component won’t necessarily break previous instances used in Drupal because the tag will stay the same. It works more like an API instead of markup dumped on the page. The internal logic of the component can change without causing compatibility problems.
- A unified design system implementation. Because the styles of the component are encapsulated within it, you can enforce brand consistency across different technologies and platforms.
- No extra libraries are needed. Previously, projects have depended upon libraries like React and Vue.js to provide custom components. You can still use those libraries, but they aren’t required. Though there are frameworks like Lit that help you build and expand components. These enhance the developer experience and are not required for using components.
- Piecemeal migration out of Drupal 7. If you start building out web components in Drupal 7, those should be transferrable to Drupal 10 or whatever platform you migrate to. This is worth considering if you still have new development to do but want less technical debt.
You might not realize all of these benefits, based on how you’re using web components, but they are there for you to pluck off the tree and enjoy, if you are willing to put in the effort. However, there are some potential downsides.
The downsides of web components
- They can slow down development time. Web components are still relatively new, and there will be quirks you need to work out. Even developers familiar with the technology will probably need to work at a more deliberate pace, like walking over uneven ground. Many times, it will be easier just to use a Twig template. The front-end skills and paradigms used for Drupal won’t necessarily transfer to developing with web components.
How to decide if you will use web components
This comes down to a simple question: do the benefits outweigh the downsides for our project?
But before you answer this question, you need to honestly assess your ability to realize and capitalize on those benefits.
To get the biggest benefit, you’ll also need some kind of governance in place. Do you have a team that can enforce brand standards and consistency? Your web component library will likely be tied to some design system, which means there is documentation that needs to be maintained and updated. You don’t want developers each making their own versions of a <my-accordion> component. Consistency doesn’t come automatically. You’ll have to work at it.
A final warning about what not to do
Native HTML tags are already native HTML tags. Don’t recreate them.
Besides that, have fun expanding the web. If you want help evaluating your need for custom web components or with your implementation in Drupal, we’d be glad to help.