You might already know that Playwright comes with all the bells and whistles which make it easy to use without the need to spend time to do set up or writing custom functions. This is true for handling elements in the shadow DOM, but only for open shadow DOM. Playwright struggles when dealing with texts enclosed in ‘user-agent’ or ‘closed’ shadow DOM trees. In this article, let me walk you through how I handled ‘open’ and ‘user-agent’ shadow roots.
Let’s first understand what a Shadow DOM is.
Shadow DOM encapsulates web components, isolating them from the rest of the DOM tree. Envision the main DOM (Document Object Model) as a big tree that contains all the elements and content of a webpage, like paragraphs, images, buttons, and more. Now, think of the Shadow DOM as a smaller, hidden tree that can be placed inside this big tree. This smaller tree (the shadow tree) has its own elements and styles, completely separate from the main DOM tree. This isolation helps keep these components distinct from the rest of the DOM. This way, any styling, behavior, or structure applied to the main DOM tree won't affect the components inside the Shadow DOM, allowing for custom styling. Another benefit is encapsulation, enabling developers to modify components independently without conflicts.
Shadow DOMs are incorporated into the main DOM tree using an element called the ‘shadow host.’ Developers can incorporate child ‘shadow hosts’ within this, thereby forming a shadow tree.
According to MDN:
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.
- Shadow host: The regular DOM node that the shadow DOM is attached to.
- Shadow tree: The DOM tree inside the shadow DOM.
- Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
- Shadow root: The root node of the shadow tree.
A shadow tree is attached to the host using either ‘open’ or ‘closed’ mode. When the developer attaches an element (or shadow tree) using ‘open’ mode, it is possible to modify the element/content using JavaScript, whereas the ‘closed’ mode makes it really difficult to deal with the element.
While inspecting html of some of the web applications, you would have come across ‘shadow-root(user-agent)’. This is shadow DOM provided by the browser itself for elements such as <input>, <select> & <video>.
Note: If you want to see shadow-root in your Chrome browser, then open the Developer console (CMD+SHIFT+C), go to settings (F1) and select the ‘Show user agent shadow DOM’ checkbox under Elements section.
