HTML5 Web Component Fundamentals
Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components.
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
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.
Table of contents
- 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
- 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
- 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
Course FAQ
HTML5 is a markup computer programming language that is the fifth iteration of the widely used HTML programming language.
HTML5 is used to structure and present content on the web. HTML code is used to describe webpages.
In this course, you will learn how use Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components. With these components you will see how HTML5 web components can give us power to extend web pages with our own standards-based components.
Some of the benefits of HTML5 is that the language is designed to deliver most components that are needed to create a fully functioning web page without any additional software. HTML5 can do everything from animation to apps, music to movies, and can build complicated applications that run within your browser.
Prerequisites for this course would be an understanding of HTML basics. An understanding of the basics of HTML will make navigating this course much easier than without.
About the author
Cory is the principal consultant at reactjsconsulting.com, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.