-
Book Overview & Buying
-
Table Of Contents
Hands-On Automated Testing with Playwright
By :
In web development, Shadow DOM lets you encapsulate parts of the DOM (like custom components) so their styles and elements don't accidentally interfere with the rest of the page. This makes it a bit tricky to access or interact with those nested elements using traditional DOM selectors. Let’s take a look at ways to pierce through this boundary and interact with these encapsulated elements.
This is often the most direct way to access elements within a Shadow DOM. You first locate the host element that has the Shadow DOM. From this root locator, you can then query for elements within it using standard Playwright locators.Let's imagine you have a custom web component like this:
<my-widget>
#shadow-root
<div class="internal-button">Click me!</div>
<style>
.internal-button { color: blue; }
</style>
</my-widget>
Here's how you'd interact with...