HTML5 Web Component Fundamentals

By Cory House
Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components.
Course info
Rating
(456)
Level
Beginner
Updated
Jan 9, 2015
Duration
5h 3m
Table of contents
Five Problems, One Solution
Intro 1m Problem 1: Undescriptive Markup 1m Problem 2: Style Conflicts 2m Problem 3: No Native Templates 1m Problem 4: No Bundling 1m Problem 5: No Standard 6m The Solution: Web Components 2m Browser Support 2m Why Learn Web Components First? 2m Selecting a Level of Abstraction 3m The Dawn of the Democratic Web 2m Summary: Why Web Components? 2m
Templates
Intro 3m Common Approaches 3m Template Characteristics 2m Defining and Cloning 7m Injecting Dynamic Data 8m Nested Templates 3m Summary 2m
Custom Elements
Intro 6m Core Functionality 2m Registering Custom Elements 3m Instantiating Custom Elements 7m Instantiating Extended Custom Elements 8m Lifecycle Callback Methods 7m Naming Approaches 10m Summary 1m
Shadow DOM Fundamentals
Intro 2m Light DOM vs. Shadow DOM 1m You Already Use Shadow DOM 4m Shadow DOM Alternatives 4m Demo: Creating Shadow DOM 7m Shadow Host and Shadow Boundary 5m Demo: Shadow DOM Terminology 4m Demo: ShadowRoot DOM Methods 3m JavaScript Is Not Encapsulated 1m Demo: JavaScript Is Not Encapsulated 4m Summary 1m
Shadow DOM Insertion Points & Events
Intro 1m Content Insertion Points 12m Insertion Points vs. Distributed Nodes 7m Content Selectors 8m Shadow Insertion Points 11m Listing Distributed Nodes and Destination Insertion Points 6m Event Retargeting 4m Events That Stop 3m Summary 2m
Shadow DOM Styling
Intro 1m :host Pseudo Selector 4m :host Theming 4m :host Specificity 5m :host States 1m :host-context Pseudo Selector 4m Styling Distributed Nodes With the ::content Pseudo Element 5m ::shadow Pseudo Element 9m /deep/ Combinator 7m :unresolved Pseudo Selector 10m Dynamic Styling 0m Summary 1m
Imports
The Bundling Problem 7m Import Overview 3m Demo: Imports 4m Other Uses for Imports 2m Referencing the Owner Document 1m Demo: Referencing the Owner Document 11m When Does Content in Imports Apply? 2m Demo: When Does Content in Imports Apply? 6m Handling Load and Error Events 1m Demo: Handling Load and Error Events 4m Handling Duplicate Requests and Resource Conflicts 7m Sub-Imports 1m Demo: Sub-Imports 5m Summary 2m
Native Alternatives
Want Cross Browser Components Today? 3m Browser Requirements 2m Feature Matrix for Non-Standard Frameworks 2m Problems Solved by Non-Standard Frameworks 4m
Resources
Resources 2m
Description
Course info
Rating
(456)
Level
Beginner
Updated
Jan 9, 2015
Duration
5h 3m
Description

In this course, you'll learn how HTML5 Web Components give us the power to extend the web with our own rich, standards-based components. Web developers have been struggling for years to create truly reusable components. We struggle with styling, bundling, defining templates, and encapsulating our markup and styles from accidental manipulation. But HTML5 Web Components provide the power to finally define standards-based, reusable web components through four new technologies. Learn how to use the Shadow DOM to encapsulate the DOM and styling for your components. Define inert templates with the template tag. Extend HTML by registering your custom elements. And bundle this all together in a simple reusable package using HTML5 imports.

About the author
Cory House
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
Managing React State
Intermediate
5h 5m
Aug 20, 2020
React: The Big Picture
Beginner
1h 10m
May 11, 2020
Clean Coding Principles in C#
Beginner
3h 18m
Jan 2, 2020
More courses by Cory House

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT