WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

Extending HTML with Web Components

Rowdy Rabouw

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.

Pause
Mute Enter Fullscreen
#1 about 5 min

Introduction to web components and their basic structure

An overview of web components without frameworks and their three main foundational parts.

#2 about 6 min

Building autonomous and customized native HTML elements

How to define autonomous custom elements and extend native HTML tags with customized logic.

#3 about 3 min

Using templates and isolating styles with Shadow DOM

Applying templates to components and preventing CSS leakage using the open shadow root.

#4 about 4 min

Applying external styling to components using CSS variables

How to pass fallback values and style components externally through standard CSS variables.

#5 about 2 min

Exposing internal component styling with CSS parts

Overriding encapsulated component styles using the part pseudo-element for greater external control.

#6 about 4 min

Passing dynamically bound data using properties and attributes

Configuring custom elements by creating JavaScript properties and observing attribute changes for synchronization.

#7 about 2 min

Managing element state with component lifecycle events

Handling element insertion, removal, and document adoption using standard lifecycle callbacks.

#8 about 3 min

Projecting external HTML content using default and named slots

Structuring flexible component layouts by passing generic and specifically named HTML elements into slots.

#9 about 6 min

Dispatching custom events to communicate between components

Broadcasting custom events from a child component and capturing details in a parent application.

#10 about 2 min

Providing fallbacks for broken component rendering

Ensuring an acceptable user experience with standard text messages when JavaScript fails or is disabled.

#11 about 6 min

Integrating web components across popular javascript frameworks

Embedding custom elements consistently inside Vue, Angular, React, and Svelte applications without rewriting code.

#12 about 4 min

Audience questions on accessibility and framework tradeoffs

Addressing concerns surrounding screen reader accessibility, pseudo-selectors, and the value of web components versus native frameworks.

Matching moments

4:56 min

Understanding standard technologies behind web component architecture

Manuel Mauky · WWC 2023

2:43 min

Leveraging web components for independent UI elements

Lucien Immink · LIVE

1:52 min

Building isolated UI elements using standard web components

Lucien Immink · WWC 2023

3:44 min

The role of web components in modern web development

Keith Cirkle · Coffee With Developers

7:10 min

Building framework-less architectures with native custom web components

Christian Liebel Christian Liebel · WWC 2022

4:16 min

Choosing native HTML elements over custom components

Jeremy Keith · WWC 2022

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

What the heck do "declarative" and "reactive" actually mean?

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Michael Yuan, Vivian Hu

Michael Yuan
Vivian Hu

Related videos

Accessibility with Web Components thumbnail
25:33
WWC 2023 • almost 3 years ago

Accessibility with Web Components

Manuel Mauky

Building a framework-independent component library thumbnail
19:46
WWC 2025 • 12 months ago

Building a framework-independent component library

Tobias Scholz

Keith Cirkle of GitHub on React Fatigue thumbnail
49:32
Coffee With Developers • over 1 year ago

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 • almost 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

The Naked Web Developer: Your Browser Is Your Framework thumbnail
42:46
WWC 2021 • about 5 years ago

The Naked Web Developer: Your Browser Is Your Framework

Avichay Eyal

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More thumbnail
59:40
LIVE • 9 months ago

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More

Chris Heilmann, Daniel Cranney, Peter Kröner

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.