All courses
Hamburger Icon
  • Course
    • Libraries: If you want this course, consider one of these libraries.
    • 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.

Treasure Porth - Pluralsight course - Web Components: Shadow DOM Deep Dive
by Treasure Porth
Get started

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 Porth - Pluralsight course - Web Components: Shadow DOM Deep Dive
Treasure Porth

Treasure is a Software Development Author at Pluralsight and has worked as both a Senior Software Engineer and an instructor, creating hundreds of hours of JavaScript-focused learning content. She is passionate about simplifying web development concepts for learners of all levels.

More Courses by Treasure