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

Introduction to Shadow DOM

From the course: Learning Web Components

Start my 1-month free trial

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…

Contents