- Course
HTML5 Web Component Fundamentals
Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components.
Beginner
- Course
HTML5 Web Component Fundamentals
Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components.
Beginner
Get started today
Access this course and other top-rated tech content with one of our business plans.
Try this course for free
Access this course and other top-rated tech content with one of our individual plans.
This course is included in the libraries shown below:
- Core Tech
What you'll learn
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.
HTML5 Web Component Fundamentals
Beginner
Table of contents
-
Intro | 37s
-
Problem 1: Undescriptive Markup | 1m 21s
-
Problem 2: Style Conflicts | 1m 34s
-
Problem 3: No Native Templates | 1m 17s
-
Problem 4: No Bundling | 44s
-
Problem 5: No Standard | 5m 40s
-
The Solution: Web Components | 2m 26s
-
Browser Support | 1m 30s
-
Why Learn Web Components First? | 1m 58s
-
Selecting a Level of Abstraction | 2m 38s
-
The Dawn of the Democratic Web | 1m 39s
-
Summary: Why Web Components? | 2m 23s
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.