HTML5 Web Component Fundamentals

Learn how to use the Shadow DOM, Custom Elements, Templates, and Imports to create reusable web components in this online HTML course.

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.

• Five Problems, One Solution 23mins
• Templates 27mins
• Custom Elements 43mins
• Shadow DOM Fundamentals 34mins
• Shadow DOM Insertion Points & Events 53mins
• Shadow DOM Styling 51mins
• Imports 56mins
• Native Alternatives 10mins
• Resources 2mins