HTML5 Web Component Fundamentals

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 Fundamentals
Hi, and welcome to the fourth module on HTML5 Web Components. I'm Cory House with BitNative Consulting. This module explores the mysterious and powerful Shadow DOM. In this module, we'll review the core problems that the Shadow DOM seeks to resolve, and we'll learn how it resolves the current issues of global scope by encapsulating DOM Subtrees. We'll consider the hacks that people commonly use today to simulate the power of the Shadow DOM, and we'll learn why these techniques aren't sufficient. We'll contrast the Light DOM that you already know and use today with the Shadow DOM, and since there's a lot of new jargon that comes with the Shadow DOM, we'll learn a variety of new terminology including Shadow Roots, Shadow Boundaries, Shadow Hosts, and DOM Subtrees. That's a lot of ground to cover, so let's get rolling. In the course introduction, we discussed how styling clashes are a common concern when creating reusable components today. And the way that it's typically solved is to write highly specific selectors to avoid accidentally styling other parts of the page. This specificity is also necessary to avoid other developers accidentally styling the components that we create. What we need is some elegant way to avoid other people accidentally manipulating our components. We face a similar struggle in the JavaScript space. Today, any HTML elements that we create are in a single DOM tree that may be manipulated by any JavaScript on the page. We need some way to hide away our markup to avoid accidental manipulation by others. The Shadow DOM seeks to solve these systemic problems by creating an encapsulated spot to define our markup in CSS, and it does so by creating a hidden and encapsulated Subtree that's separate from the DOM that you know 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.