Web Components as a Companion to Design

Web components are a great companion to reusable component design systems. However, trade-offs over custom designs can be large for enterprise web apps.

The design process involves laying out screens in tools like Sketch, Adobe XD, Envision and Figma. For complex projects, the designer relies on creating reusable components to maintain consistency. They have become a central feature of design tools for exactly that reason. In other words, consistency in design is key. But so is their ability to transfer to object-oriented development. Parameters of reusable components directly translate to user interface (UI) objects during development.

Reusable components and component parameters in Sketch
Reusable components (i.e. symbols) and component parameters in Sketch.
Javascript web component with CSS variables as parameters
Javascript web component with CSS variables as parameters.

Object-oriented programming in UI design has exploded in complexity since the pre-HTML5 days. As a result, front-end micro frameworks are now as plentiful as generalized Javascript frameworks. Moreover, micro frameworks deliver consistent, full-featured user interfaces. While the essential unit of UI design tools is the reusable component, the front-end micro framework counterpart is the web component.

Advantages of Web Components

Web components are custom HTML elements embedded with unique functions, styles and behaviors. For example, button elements can have event listeners, themed styling or other requirements. These custom buttons replace standard HTML buttons.  The defining aspect of web components is they are encapsulated away from the document object model (DOM). Instead, they use their own sub-DOM, called a shadow DOM.

Web component shadow DOM
Web component shadow DOM (shown as #shadow-root in the Chrome browser inspector window).

Encapsulation is essential for maintaining consistency in interface design. This is true for web applications of even average complexity because CSS styles can often inherit and overwrite each other in unpredictable ways. The behaviors are difficult to pinpoint and fix. But web component style rules are independent of the DOM and other components. Therefore, encapsulation solves the problem by untangling the mess created by CSS styles.

Styles applied globally do not affect encapsulated web components
Styles applied globally to all buttons do not affect the encapsulated web component button.

Web components match the simplicity and function of reusable components. They allow for a seamless translation between the designer’s component file and developer’s web component UI kit.  The biggest benefits come when the team agrees on standard functions and styling. Then global style rules can be applied to a common, reusable, web component library. This strategy reduces both design and development time and cost.

UI kit libraries are available online to use as starter kits.
UI kit libraries are freely available online and can be used as great starter kits for your project or your own web component library. Shown is a collection of components from the “Unit Design System.”

Drawbacks of Web Components

For prototyping user interfaces, web components are fast and effective. Yet, there are performance costs to adding too many. To illustrate, I copied simple web components and tracked page load finish times. The following table shows increases in load times as I added more components:

Number of Components
Added to DOM
Page Load Time

In the abstract, it may seem preposterous to add over 1000 elements to a screen. In fact, the common case of order-entry systems—showing hundreds of products, each composed of many web components—requires an extraordinary number of elements. The load times shown above don’t even include the time to receive data from an API endpoint. For Enterprise Resource Planning (ERP) and Cloud Provisioning systems, web components stall the load time and UI responsiveness. If levels are unacceptable, the their use requires complex loading strategies. General development frameworks, such as React and Angular, specialize in the necessary loading strategy. But web components are best suited to front-end micro frameworks. Combining web components with other frameworks also has trade-offs—a discussion for future posts.


In short, structured consistency in design and development is key. Web components offer a clear advantage. But for enterprise web apps, speed is an essential feature. On that, web components do not easily deliver.

Digital product designer, lover of complex problems and tech, can design/build anything; swings for the fences.