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 Hi, and welcome to HTML5 Web Component Fundamentals. I'm Cory House with Pluralsight. You can reach me on my blog at bitnative. com or catch me on Twitter: @housecor. Today's web developers have some big problems, and that's why I'm really excited to bring you this course on HTML5 Web Components. I believe web components are going to radically improve the way that we write applications today. So what sorts of problems am I talking about? Let's walk through five specific problems that web developers face today.
Shadow DOM Insertion Points & Events Hi, and welcome to the fifth module on Shadow DOM Insertion Points and Events. I'm Cory House with BitNative Consulting. This module will explore some other key concepts for working with the Shadow DOM. We'll discuss the power and flexibility of defining Content Insertion Points in your Shadow DOM. And you'll even learn how to insert other Shadow DOM into your Shadow DOM. Finally, we'll close out the module by covering some unique quirks that occur with Events when you're working with the Shadow DOM. The Shadow DOM gets really interesting once you start leveraging these powers. Let's explore Insertion Points first.
Shadow DOM Styling Hi, I'm Cory House. In this module on HTML5 Web Components, we're going to discuss a variety of new selectors and styling concerns that are unique to building web components. As we discussed in the previous module, the Shadow DOM provides encapsulation of DOM Subtrees and also encapsulates styles. In this module, we'll cover a variety of new CSS selectors and concepts that apply specifically to working with the Shadow DOM, Distributed Nodes, and Shadow Hosts. The great news is, all the existing CSS principles and knowledge you already have still apply to web components, but since the Shadow DOM encapsulates DOM elements, we need some extra power to style the Shadow DOM. And as you'll see, these selectors provide the power to style the Shadow DOM, both from the inside and the outside, and to change styles of distributed nodes that are displayed within <content> tags as well. But be careful if you search around on the web for information on styling in Shadow DOM. Specifications in the area of styling have shifted a lot before being finalized with the selectors that you see here. Older specs included the cat and hat selectors, but these were replaced by shadow and deep. Let's step through the details on each of these items and look through some examples to see how they impact styling.