The Power of Pure Web Components

Article written by Elizabeth Sanger.

For those with even peripheral exposure to the language of web development, the term “web component” likely has some resonance. The modern web is increasingly reliant on component-driven architectures, including popular frameworks like React and Angular, both of which derive much of their utility by leveraging declarative HTML via encapsulated and reusable components. However, “pure” web components, while by no means incompatible with the components used by web frameworks like Angular and React, are slightly different.

What is a Pure Web Component?

Put simply, a pure web component is a custom HTML element, distinct from native elements like “span” and “header” and built in JavaScript by explicitly calling the Custom Elements API, a read-only interface on the JS Window object. Pure web components use class-based ES 6 syntax to extend upon either native HTML elements, like HTMLParagraph, or the base HTMLElement itself. Custom elements that extend upon the base HTMLElement are considered “autonomous components,” while those that extend upon existing elements may be referred to as “customized elements.”

Regardless of their type, a hallmark feature of pure web components is their ability to attach to the “shadow DOM.” While all HTML elements are rendered in the browser via the DOM (aka, Document Object Model), elements attached to the shadow DOM are not accessible to developers via standard DOM traversal and can be considered part of a scoped sub-tree. In other words, the browser recognizes and renders pure web components, but as “shadows” of the standard DOM tree. As with standard HTML elements, they can both fire and listen for events via the browser; however, unlike their traditional counterparts, once pure web components are defined and inserted, they cannot be reached by additional scripting against the standard DOM.

Pure web components appeal to developers for a myriad of reasons. When the browser has more control over DOM elements than developers, the likelihood of cross-contamination during future development efforts decreases. Just like native HTML elements, pure web components are reusable, making a developer’s job easier while maintaining adherence to OOP best practices. Moreover, the sub-scope inherent to the shadow DOM obviates the risk of CSS leakage between standard and custom elements.

Why are Pure Web Components important?

To developers, the appeal of pure web components may be obvious, but not necessarily so for business leaders, product owners, project managers, and other tech professionals tasked with evaluating technologies and development strategies with an eye to profitability, client satisfaction, project requirements and deadlines, and overall ROI. Both leadership and development teams at Core10 recognize that there’s more at stake when making technical determinations than their appeal to developers and programmers.

Big-Picture Benefits

• Flexible & Cost Effective: Pure web components can be used with or without a pre-existing web framework like Angular, which means front-end development teams of all types can integrate them immediately into existing or new projects with little more than a basic familiarity with vanilla JavaScript. No additional training or staffing is required.
• Reduced Development Time: Well-designed pure web components keep project timelines on track by reducing the need to duplicate logic throughout an application, whether that application is a quick-and-dirty SPA or a sophisticated monolith.
• Easy to Maintain: The encapsulation provided by the shadow DOM makes both growing and maintaining web pages easier and more efficient, even with staff or resource rollover.
• Appealing UI: CSS leakage, or the unintended application of one element’s style to another, can prove a challenge to all but seasoned UI developers. It becomes particularly onerous in a technological ecosystem that considers responsive design less a bonus than a basic requirement. Styling applied to web components is water-tight, impenetrable to the standard DOM while maintaining a private scope that prevents shadow CSS from leaking.

The Bottom Line

In software--and particularly fintech--rarely does a technology or technical utility merit the reputation of a unilaterally good choice. Although web components are no different, they certainly come close. Integrating pure web components is a low-risk, high-reward means of amplifying code quality while lowering development time, regardless of project size or scope. Core10’s development team, fluent in the construction and application of pure web components, builds them regularly to optimize client and end-user satisfaction while respecting the budget of fintechs, large and small.