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 · World Congress 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 · World Congress 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 · World Congress 2022

4:16 min

Choosing native HTML elements over custom components

Jeremy Keith · World Congress 2022

More from World Congress 2022

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

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

André Kovac

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

The Design and Evolution of C++

Bjarne Stroustrup

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

But, you're not Facebook

Kristijan Ristovski

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

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

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

Get Ready for Jakarta EE 10!

Ivar Grimstad

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

Keep your code refactorable

Gerrit Stapper

Related videos

Accessibility with Web Components thumbnail
25:33
World Congress 2023 • about 3 years ago

Accessibility with Web Components

Manuel Mauky

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

Keith Cirkle of GitHub on React Fatigue thumbnail
49:32
Coffee With Developers • almost 2 years ago

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 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
World Congress 2021 • over 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 • 11 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.