Extending HTML with Web Components

Escape framework lock-in. Build UI components that work in any project, with any stack, using only native browser APIs.

#1about 3 minutes

Celebrating the end of Internet Explorer 11 support

The retirement of Internet Explorer 11 simplifies web development by removing the need for polyfills for modern features like web components.

#2about 1 minute

Introducing the three core parts of web components

Web components are framework-agnostic, reusable UI elements built from three main technologies: custom elements, HTML templates, and the shadow DOM.

#3about 3 minutes

How to define a new autonomous custom element

Create a completely new HTML element by defining a class that extends HTMLElement and registering it with customElements.define().

#4about 2 minutes

How to extend existing native HTML elements

Modify the behavior of a standard HTML element, like an anchor tag, by extending its specific class and using the 'is' attribute.

#5about 3 minutes

Encapsulating styles and markup with shadow DOM

The shadow DOM isolates a component's internal structure and CSS from the main document, preventing style leaks in or out.

#6about 3 minutes

Styling encapsulated components with CSS variables

Use CSS custom properties (variables) defined on the :host pseudo-class to allow external CSS to customize a component's internal styles.

#7about 1 minute

Exposing internal elements for styling with ::part

The ::part pseudo-element provides a powerful way for users to directly style specific internal elements of a web component from outside the shadow DOM.

#8about 4 minutes

Passing data using properties versus attributes

Use HTML attributes for simple string-based data and JavaScript properties for complex data types like objects or arrays, observing attribute changes with a callback.

#9about 2 minutes

Understanding the web component lifecycle callbacks

Web components have lifecycle callbacks like connectedCallback and disconnectedCallback that fire when the element is added to or removed from the DOM.

#10about 2 minutes

Composing components with default and named slots

Use the <slot> element to create placeholders in a component's template, allowing users to inject their own content into default or named slots.

#11about 3 minutes

How to dispatch custom events from a component

Emit custom events from a web component using dispatchEvent and new CustomEvent() to communicate data and state changes back to the parent application.

#12about 3 minutes

An example of communication between two components

A practical demonstration shows how a list component can dispatch a select event that a detail component listens for to update its content.

#13about 1 minute

Providing fallbacks when JavaScript fails to load

Ensure a good user experience by providing fallback content inside your custom element tag or using a <noscript> tag in case JavaScript is disabled or fails.

#14about 5 minutes