Shadow DOM

 What is Shadow DOM?? - How to deal with it in Selenium.

- It 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.

Some terminology under shadow 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.

In Selenium, JavaScript is used to access shadow element -

WebElement shadowHost = driver.findElement(By.cssSelector(".shadowHost"));
JavascriptExecutor jsDriver = (JavascriptExecutor) driver;
WebElement shadowRoot = (WebElement) jsDriver.executeScript("return arguments[0].shadowRoot", shadowHost);
WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".shadowContent"));

In Selenium 4 with Chromium browsers v96 and above, to access shadow DOM element use -

WebElement shadowHost = driver.findElement(By.cssSelector(".shadowHost"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".shadowContent"));