Gain an understanding of what Shadow DOM is, why it's needed, and how it compares to regular web page 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.…
Joe Marini starts the course by going into HTML templates, which provide a browser-native way to declare sections of HTML markup that will be used frequently in your app. Next, he covers HTML imports, explaining how to use them and create reusable modules. Then, he takes you through working with custom elements. To wrap up the course, he discusses Shadow DOM and how to create Shadow DOM to define custom element structure and rendering within a page.
- Web standards
- Customizing web components
- Activating and using templates
- Using HTML imports
- Creating reusable modules
- Defining custom elements
- Customizing elements and styles
- Creating Shadow DOM
- Styling and Shadow DOM