From the course: Learning Web Components
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Introduction to Shadow DOM
- [Instructor] So far in this course, we've seen how to use templates to define reusable chunks of HTML, how to store those templates in files that can be imported using HTML imports, and how to create custom elements. The final piece of the puzzle in creating true web components is called Shadow DOM which we'll learn about in this chapter. So, what is Shadow DOM and why do we need it? Well, one of the biggest problems web developers face today is that web apps, by their nature, are very brittle. The main reason for this is the global nature of HTML, CSS and JavaScript. This global nature makes it very easy to build web content, but it also makes it very easy to introduce problems once you start building large complex apps. For example, a common problem that web developers run into is that it's very easy to make a change to a CSS style in one file that causes problems in another style definition. A similar problem happens when you try to incorporate page content from multiple sources…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.