Add a Screenplay question to get Shadow Root

[craigfowler]

See https://www.selenium.dev/documentation/webdriver/elements/finders/#evaluating-the-shadow-dom

[craigfowler]

AI generated info on browser support for this.

---

Selenium's native Shadow DOM support via GetShadowRoot() is not fully cross-browser — here's the breakdown:

Chromium-based browsers (Chrome, Edge, Opera)
As of Chromium v96, shadow root values are compliant with the W3C WebDriver specification, which includes definitions for getting an element's shadow root and locating elements in a shadow root. Medium This is the most fully supported path.

Firefox
Firefox does not currently support getting a shadow root with JavaScript. It does support getting the child elements of a shadow root, though, and it is supported by all versions of Firefox and Selenium. Medium

Safari
We can expect to see implementations in Firefox and Safari at some point. Medium Safari support is partial/pending.

---

Practical advice for cross-browser scenarios:

• Chromium (Chrome/Edge): Use the native GetShadowRoot() approach in Selenium 4+ — it's clean and W3C-compliant.
• Firefox fallback: Use IJavaScriptExecutor to execute arguments[0].shadowRoot and work with child elements from there.
• General workaround (all browsers): The JavaScript executor approach works broadly and is the safest bet if you need to support multiple browsers:

var shadowHost = driver.FindElement(By.Id("shadow-host-id"));
var js = (IJavaScriptExecutor)driver;
var shadowRoot = (IWebElement)js.ExecuteScript("return arguments[0].shadowRoot", shadowHost);
var element = shadowRoot.FindElement(By.CssSelector("your-selector"));

If cross-browser support is critical, the JavaScript executor fallback is the most reliable common denominator for now.