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