> Markdown version of [/playlists/web-components](https://www.wearedevelopers.com/playlists/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). --- # Playlist: Web components 15 videos · 19 moments · 66.7 minutes ## Accessibility with Web Components - **Building a framework-agnostic design system with web components** (00:00, 4min) — Achieving a consistent user interface across diverse application teams requires a framework-agnostic web component library. - **Understanding standard technologies behind web component architecture** (04:23, 4min) — Utilizing browser standards like custom elements and shadow DOM prevents vendor lock-in across implementation frameworks. - **Resolving default accessibility limitations in custom web components** (09:19, 4min) — Unrecognized custom elements require explicit ARIA attributes and design patterns to function correctly with assistive technologies. [Learn more](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) ## Building a framework-independent component library - **What are web components and custom elements** (01:43, 1min) — Custom elements extend standard browser elements through dedicated JavaScript classes defining native-like behaviors. [Learn more](https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library) ## Why LIT is Fire - **Building isolated UI elements using standard web components** (03:47, 1min) — An overview of how web components encapsulate HTML templates, custom elements, and styling. [Learn more](https://www.wearedevelopers.com/videos/774-why-lit-is-fire) ## Unlocking Seamless Collaboration: Design-First APIs for UI Components - **Leveraging web components for independent UI elements** (11:26, 2min) — Standardized shadow DOMs and slots securely encapsulate business logic and styling inside reusable web components. [Learn more](https://www.wearedevelopers.com/videos/1210-unlocking-seamless-collaboration-design-first-apis-for-ui-components) ## Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios - **Abstracting framework implementations behind native web components** (09:31, 4min) — Wrapping single-page applications inside native web components standardizes their bootstrapping and teardown processes within the shell. - **Summary of web components and module federation capabilities** (23:13, 1min) — Combining standard web components with module federation provides a robust mechanism for integrating diverse technological stacks. [Learn more](https://www.wearedevelopers.com/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios) ## Keith Cirkle of GitHub on React Fatigue - **The role of web components in modern web development** (27:32, 3min) — Native web components provide an interoperable layer without the heavy architectural opinions imposed by large frameworks. [Learn more](https://www.wearedevelopers.com/videos/1265-keith-cirkle-of-github-on-react-fatigue) ## The Naked Web Developer: Your Browser Is Your Framework - **Authoring native web components directly in the browser** (17:23, 1min) — Opting for native web components rather than framework-specific compilers ensures universally compatible custom view elements. [Learn more](https://www.wearedevelopers.com/videos/224-the-naked-web-developer-your-browser-is-your-framework) ## Extending HTML with Web Components - **Introduction to web components and their basic structure** (00:00, 4min) — An overview of web components without frameworks and their three main foundational parts. - **Integrating web components across popular javascript frameworks** (32:03, 5min) — Embedding custom elements consistently inside Vue, Angular, React, and Svelte applications without rewriting code. [Learn more](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) ## Micro Frontends with Module Federation: Why and How? - **Mixing framework versions using web components and federation** (36:49, 4min) — Combining web components with module federation allows developers to mix incompatible frameworks safely inside a single browser window. [Learn more](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) ## Multiple Ships to the Island - Micro Frontends & Island Architectures - **Implementing client-side composition and dynamic web components** (06:46, 1min) — Client-side composition combines independent scripts and custom elements directly in the browser. [Learn more](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) ## Speak, Code, Deploy: Transforming Developer Experience with Voice Commands - **Abstracting web UI complexity with Vaadin Java components** (00:53, 2min) — Encapsulating complex frontend details inside dynamic runtime Java APIs reduces developer friction. [Learn more](https://www.wearedevelopers.com/videos/1159-speak-code-deploy-transforming-developer-experience-with-voice-commands) ## Developing the Rich Text Editor for DeepL.com - **Designing a custom web component natively extending content editing** (02:52, 1min) — Creating an backward-compatible replacement that wraps the browser API while enabling custom text attachments. [Learn more](https://www.wearedevelopers.com/videos/1172-developing-the-rich-text-editor-for-deepl-com) ## Making of paint.js.org—a Web Component-based Productivity PWA - **Building framework-less architectures with native custom web components** (10:11, 7min) — Leveraging the lit library creates lightweight, interoperable custom HTML elements without relying on heavy frontend frameworks. [Learn more](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) ## On tour with heroes == Moving from Angular to WebComponents - **Evaluating Angular trade-offs and the web components alternative** (03:09, 3min) — Angular's size and complexity create vendor lock-in, making simpler, framework-agnostic web components an appealing alternative. [Learn more](https://www.wearedevelopers.com/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents) ## Design Principles For The Web - **Choosing native HTML elements over custom components** (22:41, 4min) — The practical trade-offs between under-engineered native web components and over-engineered custom solutions. [Learn more](https://www.wearedevelopers.com/videos/518-design-principles-for-the-web)