This is a list of web components lessons showing the technologies behind it and some practical ways to use it now in production.

Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes.

You'll learn how to create a Custom Web Element (that extends `HTMLElement`) that renders text to the browser and respond to a click event listener.

Render Hello World Text with Custom Elements

HTMLTemplates are part of the web components specification.  In this lesson we will learn what are HTML templates, how to use them and how to use the powerful HTMLTemplates slots inside a web component.

Build Flexible HTML with HTMLTemplates using Slots and Web Components

Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the component.
In this lesson you will learn how to setup a shadow DOM and see the CSS encapsulation in action.

Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

The Shadow DOM protects your components from style conflicts. The same protection also makes it hard for users to modify the inner style for their own needs. In this lesson we go over 3 ways to define API for a controlled manipulation of encapsulated styles.

Allow External Styling of a Web Component's Shadow DOM

In this lesson, you will learn how to create an explicit API using methods on the web component itself.

Web components explicit API's using class methods

In this lesson you will learn how to use custom events to expose internal events from withing a web component.

Using Custom Events as a web component API

The part pseudo class allows consumers of a web component to manipulate certain key elements inside the Shadow DOM.  In this lesson we will explore two use cases to using the part pseudo class.

Web Components

Instructor

Course Content