> Markdown version of [/videos/459-extending-html-with-web-components](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Extending HTML with Web Components

Tired of rewriting the same UI components for React, Vue, and Angular? Discover how vanilla Web Components deliver framework-agnostic, encapsulated elements that save enterprise time.

- **Speakers:** [Rowdy Rabouw](https://www.wearedevelopers.com/@rowdy-rabouw)
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 41:54
- **URL:** https://www.wearedevelopers.com/videos/459-extending-html-with-web-components

## Summary

The deprecation of Internet Explorer 11 has removed a significant barrier for native browser features, allowing developers to build framework-agnostic, reusable UI elements using vanilla Web Components. Without relying on heavy frameworks like React, Vue, or Angular, developers can encapsulate logic and styling, ensuring consistency across disparate enterprise codebases. The core architecture relies on an ES6 class extending native HTML elements to create either autonomous custom elements or customized native elements (though WebKit support requires polyfills for customized native tags).

At the heart of Web Components are three pillars: custom elements, HTML templates, and the Shadow DOM. The Shadow DOM is critical because it encapsulates CSS, preventing global styles from unintentionally leaking in or breaking out. To maintain flexibility, developers can expose specific styling hooks to consumers. While CSS variables mapped to the `:host` selector offer global theme control, the highly powerful `::part()` pseudo-element gives external consumers granular control over specific internal nodes. Data binding is managed via component properties (for objects and arrays) and attributes (for strings), selectively triggering reactivity through `observedAttributes` and the `attributeChangedCallback` lifecycle method.

Interactivity in these components relies on standard browser APIs, utilizing named slots to inject custom markup and dispatching custom JavaScript events to communicate data back to parent containers. A primary advantage of this standard is true cross-framework portability; a single Web Component can be imported directly into Angular (via custom schemas), Vue, Svelte, or React (which occasionally requires lightweight event wrappers). By utilizing Web Components for &quot;dumb&quot; UI elements—like presentation cards, buttons, or specialized media players—while keeping essential business logic in framework-specific &quot;smart&quot; components, organizations can &quot;save time and money across a company&quot; by eliminating redundant cross-team rewrites.

**Keywords:** framework-agnostic web components, vanilla javascript UI concepts, autonomous custom HTML elements, shadow DOM CSS encapsulation, CSS part pseudo-element, attributechangedcallback lifecycle event, observedattributes array reactivity, custom event data dispatching, named slots in shadow DOM, angular custom elements schema, react web component event wrappers, vue integration for web components, lit and stencil UI libraries, enterprise UI component reusability

## Chapters

1. **Introduction to web components and their basic structure** (00:00) — An overview of web components without frameworks and their three main foundational parts.
1. **Building autonomous and customized native HTML elements** (04:36) — How to define autonomous custom elements and extend native HTML tags with customized logic.
1. **Using templates and isolating styles with Shadow DOM** (09:43) — Applying templates to components and preventing CSS leakage using the open shadow root.
1. **Applying external styling to components using CSS variables** (12:23) — How to pass fallback values and style components externally through standard CSS variables.
1. **Exposing internal component styling with CSS parts** (15:53) — Overriding encapsulated component styles using the part pseudo-element for greater external control.
1. **Passing dynamically bound data using properties and attributes** (17:00) — Configuring custom elements by creating JavaScript properties and observing attribute changes for synchronization.
1. **Managing element state with component lifecycle events** (20:57) — Handling element insertion, removal, and document adoption using standard lifecycle callbacks.
1. **Projecting external HTML content using default and named slots** (22:52) — Structuring flexible component layouts by passing generic and specifically named HTML elements into slots.
1. **Dispatching custom events to communicate between components** (25:13) — Broadcasting custom events from a child component and capturing details in a parent application.
1. **Providing fallbacks for broken component rendering** (30:39) — Ensuring an acceptable user experience with standard text messages when JavaScript fails or is disabled.
1. **Integrating web components across popular javascript frameworks** (32:03) — Embedding custom elements consistently inside Vue, Angular, React, and Svelte applications without rewriting code.
1. **Audience questions on accessibility and framework tradeoffs** (38:02) — Addressing concerns surrounding screen reader accessibility, pseudo-selectors, and the value of web components versus native frameworks.

## Related Moments

- [Understanding standard technologies behind web component architecture](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) (from "Accessibility with Web Components")
- [Leveraging web components for independent UI elements](https://www.wearedevelopers.com/videos/1210-unlocking-seamless-collaboration-design-first-apis-for-ui-components) (from "Unlocking Seamless Collaboration: Design-First APIs for UI Components")
- [Building isolated UI elements using standard web components](https://www.wearedevelopers.com/videos/774-why-lit-is-fire) (from "Why LIT is Fire")
- [The role of web components in modern web development](https://www.wearedevelopers.com/videos/1265-keith-cirkle-of-github-on-react-fatigue) (from "Keith Cirkle of GitHub on React Fatigue")
- [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Choosing native HTML elements over custom components](https://www.wearedevelopers.com/videos/518-design-principles-for-the-web) (from "Design Principles For The Web")

## Related Articles

- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [HTML Media Elements and How to Use Them: &lt;video&gt; and &lt;audio&gt;](https://www.wearedevelopers.com/magazine/668-html-media-elements-and-how-to-use-them-video-and-audio)
- [The State of HTML 2024: What can we learn from it?](https://www.wearedevelopers.com/magazine/506-the-state-of-html-2024-what-can-we-learn-from-it)

## Related Jobs

- [Software Engineer, React &amp; Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**