Web components have come a long way over the past few years, evolving from a niche concept to a foundational technology for creating interoperable, reusable user interface elements. In the talk "How to Use Web Components in Modern UI Workflows", Martin Hel, a principal engineer at Microsoft, dives deep into the promise, progress, and current state of web components. This article distills key insights from his talk, providing actionable advice for UI/UX designers and front-end developers who aim to leverage web components in their workflows.
Introduction to Web Components
Web components are a set of native web platform APIs that allow developers to create reusable, encapsulated custom UI elements without relying on external frameworks. They are built on three core technologies:
- Custom Elements – Enables the creation of new HTML elements.
- Shadow DOM – Provides a way to isolate styles and markup from the rest of the page.
- HTML Templates – A native mechanism for defining reusable chunks of markup that can be instantiated dynamically.
These features make web components an attractive option for building design systems, enhancing HTML, and creating standalone widgets that work seamlessly across different frameworks and browsers.
Martin Hel’s talk offers an in-depth exploration of the advancements in web components over the past five years, addressing their growing adoption, new browser APIs, accessibility improvements, and practical use cases.
A Snapshot: The Growing Adoption of Web Components
Five years ago, web components were used on a meager 6% of web pages. Today, that number has grown to approximately 20%, according to Martin Hel. Major companies like Apple, YouTube, GitHub, Microsoft, and Adobe have adopted web components in their products, signaling industry-wide recognition of their value.
This growth is attributed to advancements in browser support, improvements in the native feature set, and the rise of tools and standards that make web components easier to use in real-world applications. However, challenges remain, especially in areas like server-side rendering and accessibility, which the community continues to address.
Key Technical Developments in Web Components
1. Improved Templating Features
HTML templates have long been a core part of web components, but they lack the dynamic capabilities offered by frameworks like React. New proposals, such as Template Instantiation and DOM Parts, aim to bridge this gap by providing native support for data binding and dynamic updates.
While these proposals are still in development, they promise to make web components more developer-friendly, enabling features like automatic state propagation and interpolation within templates.
2. Enhanced Styling Options
Styling within web components is both a strength and a challenge. Shadow DOM provides strong encapsulation, isolating styles from the rest of the page. However, this isolation requires developers to rethink their approach to styling.
- CSS Variables: Allow customization of shadow DOM styles by exposing "public APIs" for component styling.
- Constructible Stylesheets: A memory-efficient approach that allows styles to be shared programmatically across components without duplication.
- CSS Shadow Parts: Enable selective customization of internal component styles by exposing specific parts of the shadow DOM for external styling.
These advancements provide developers with more control and flexibility, but they also necessitate a deeper understanding of CSS scoping and shadow DOM principles.
3. Scoped Registries for Custom Elements
One of the long-standing challenges with web components has been the global nature of the custom elements registry, which causes conflicts when different libraries or packages define elements with the same name.
The introduction of Scoped Custom Element Registries addresses this issue by allowing developers to define and manage custom elements within isolated scopes, preventing naming collisions and enabling safer integration of third-party libraries.
4. Accessibility Enhancements
Accessibility has been a critical area of focus for web components, particularly when using shadow DOM. Recent improvements include:
- Delegate Focus: Ensures that focus automatically shifts to the correct element within the shadow DOM, preserving native keyboard navigation behaviors.
- Element Internals API: Allows custom elements to participate in native form behaviors, such as validation and submission.
- Shadow DOM Reference Target Proposal: Aims to resolve issues with cross-root ARIA references, making shadow DOM elements more accessible to assistive technologies.
These updates demonstrate a commitment to ensuring that web components meet modern accessibility standards.
5. Declarative Shadow DOM for Server-Side Rendering
Server-side rendering (SSR) has historically been a weak point for web components. The introduction of Declarative Shadow DOM changes this by allowing developers to define shadow DOM structure directly within HTML templates.
This feature simplifies SSR workflows and improves initial render performance, although challenges remain, such as the increased size of HTML documents when using declarative shadow DOM extensively.
Practical Use Cases for Web Components
Enhancing Design Systems
Web components are an excellent choice for creating design systems that need to work across multiple frameworks. Their encapsulated nature ensures consistency and reusability, while features like shadow DOM provide strong isolation for styles and functionality.
However, developers should be cautious when combining web components with server-side rendering or framework-specific features, as these scenarios may require additional tooling or custom solutions.
Standalone Widgets
Web components shine as standalone, reusable widgets that can be easily integrated into any application. Examples include a custom calendar component or a rich text editor. These components are self-contained and framework-agnostic, making them ideal for distribution across different projects and teams.
Progressive Enhancement
By using web components to enhance existing HTML elements, developers can provide advanced functionality while maintaining compatibility with non-JavaScript environments. This declarative approach aligns with best practices for progressive enhancement, ensuring a baseline experience for all users.
Key Takeaways
- Adoption is Growing: Web components are now used by 20% of web pages, with adoption by major companies like Microsoft, Apple, and YouTube.
- Three Pillars of Web Components: Custom elements, shadow DOM, and HTML templates form the foundation of this technology.
- Styling is Evolving: CSS variables, constructible stylesheets, and shadow parts provide powerful new options for styling web components.
- Accessibility Improvements: New APIs like Element Internals and Delegate Focus address long-standing accessibility challenges.
- Scoped Registries Solve Conflicts: Scoped custom element registries prevent naming collisions, enabling safer integration of third-party libraries.
- Declarative Shadow DOM Simplifies SSR: Declarative shadow DOM makes server-side rendering feasible, but implementation challenges remain.
- Practical Use Cases: Web components excel in design systems, standalone widgets, and progressive enhancement scenarios.
- Not a Silver Bullet: While powerful, web components are not a universal solution and should be used judiciously.
Conclusion
Web components have matured significantly over the past five years, addressing critical gaps in styling, accessibility, and server-side rendering. They are no longer just a niche technology but a viable option for creating reusable, interoperable UI elements in modern applications.
While challenges remain, especially in achieving full parity with framework-driven workflows, the trajectory is clear: web components are becoming an essential tool in the UI/UX designer’s and front-end developer’s arsenal. By leveraging their strengths and understanding their limitations, teams can harness the transformative potential of web components to build better, more consistent user experiences.
As Martin Hel optimistically notes, the future of web components is bright – and perhaps in another five years, we’ll have reached the promised land of full adoption and seamless integration.
Source: "tim.js meetup 100: Web Components: are we there yet? by Martin Hochel" – tim.js, YouTube, Oct 2, 2025 – https://www.youtube.com/watch?v=jzMIgJpoRoQ
Use: Embedded for reference. Brief quotes used for commentary/review.
