Skip to main content

​
What is a web component ?

Web Components are a set of Web standards (Custom Elements, Shadow DOM, HTML Templates, ES Modules) that enable the creation of reusable, encapsulated user interface components natively supported by modern browsers. They allow developers to define custom HTML elements with their own behavior, styling, and logic—without risking conflicts with the rest of the application.

​
The Four Pillars of Web Components

  1. Custom Elements: Allow defining new HTML tags with custom behavior (e.g., <dtn-consumption-monitoring>).
  2. Shadow DOM: Provides encapsulated DOM within the component, isolating styles and structure from the rest of the page.
  3. HTML Templates: Enable reusable HTML fragments that are not rendered immediately.
  4. ES Modules: Allow modular JavaScript imports natively in the browser.

​
Why choose Web Components?

​
Reusability

Web Components are designed to be reusable. Once created, they can be used across multiple projects without modification—whether in Angular, React, Vue apps, or even plain HTML pages. It is also possible to integrate them into a mobile application via a webView.

​
Framework Agnostic

Web Components: Advantages and Disadvantages of a Framework‑Agnostic solution Advantages:
  • No need for conversions or adaptations across frameworks
  • Render consistently and deliver the same look and feel on both iOS and Android—no platform‑specific tweaks required.
  • Work directly in the browser, using native APIs
  • Easily integrated into existing platforms, including CMS, legacy apps, or WebViews
  • Ideal for cross-team collaboration, allowing backend teams to consume components without adopting a specific frontend framework
  • Help enforce a consistent UI/UX across heterogeneous environments, particularly valuable in enterprise settings where multiple frontend technologies coexist
Disadvantages:
  • Web Components don’t include a shared event system, you’ll need to manually wire data and events between them—usually via parent components or an external state manager.
  • There’s no automatic fallback when a component fails to load or isn’t available, so you must build your own error handling and substitute UI to cover those cases.
  • If your app uses strict Content Security Policies, every external script or style that a Web Component relies on has to be explicitly whitelisted, which adds extra overhead to your security setup.
  • Each Web Component ships with its own code bundle, so the more components you drop onto a page, the larger your JavaScript payload becomes—potentially slowing down both page load and runtime performance. To achieve this, we have significantly optimized the size of our bundles to avoid loading too much data.

​
Easy to customize

Web Components can use CSS custom properties (variables) to allow external styling while maintaining encapsulation. This makes it possible to adapt the appearance of a component to match a brand or theme without modifying its internal logic. A whole section is dedicated to this part concerning the customization of components: parameter a component

​
Encapsulation

Thanks to the Shadow DOM, styles and behavior are isolated:
  • No CSS conflicts due to the use of Shadow DOM, which ensures that styles defined within a component do not affect or get affected by global styles
  • No unwanted style or behavior leaks: the internal structure and logic of the component remain isolated, preventing external scripts or styles from unintentionally altering its behavior

​
Easy Integration in Mobile Apps (via WebView)

​
Hybrid Framework Integration

If you’re using a hybrid framework like React Native or Ionic for exemple, you’ll need to install and configure a dedicated WebView plugin (ex: react-native-webview for React Native). These plugins bridge between the hybrid runtime and the underlying native WebView, allowing you to inject your component scripts and set up JavaScript–native message handlers just as you would in a fully native app.

​
Native Mobile Integration

In a native mobile application, integrating Web Components via a WebView is simple and straightforward, even though it isn’t plug‑and‑play: each platform (iOS with WKWebView, Android with WebView) requires its own setup to instantiate the view, inject component scripts, and handle communication between JavaScript and native code. This section walks you through, step by step, how to implement these easy, OS‑specific adaptations to ensure a reliable, consistent integration of your Web Components on smartphone.
Last modified on October 14, 2026