- Course
- Core Tech
Web Components: Shadow DOM Deep Dive
Learn how to encapsulate structure, style, and behavior using the shadow DOM. This course will teach you how to build and style custom elements that respond to events cleanly and predictably.
What you'll learn
Web components offer encapsulation and reuse, but the shadow DOM can be a mystery for many developers. In this course, Web Components: Shadow DOM Deep Dive, you’ll learn to create and style custom elements with cleanly scoped behavior and presentation. First, you’ll explore how the shadow DOM works and how to create custom elements with encapsulated templates and styles. Next, you’ll discover how to apply advanced styling techniques using selectors and constructable stylesheets. Finally, you’ll learn how events behave in the shadow tree, including retargeting, composed paths, and custom events. When you’re finished with this course, you’ll have the skills and knowledge of the shadow DOM needed to build maintainable, self-contained web components.
Table of contents
About the author
Treasure is a software developer and educator. Since transitioning from a career in postsecondary education to web development in 2015, Treasure has worked in EdTech both as a Senior Software Engineer and an instructor, creating hundreds of hours of JavaScript-focused learning content across many platforms, including Treehouse, Scrimba, Free Code Camp, and Coursera. She is passionate about simplifying web development concepts for learners of all levels.