Write Playwright locators that pierce open shadow roots to interact with nested web components

Steps

1. Use ordinary CSS or text locators via page.locator() — Playwright's engine pierces open shadow roots automatically with no special syntax
2. Chain locator() calls across shadow boundaries the same way as regular DOM descendants; nested open shadow roots are pierced too
3. Avoid XPath-based locators for shadow content, since XPath does not pierce shadow roots
4. Confirm the component uses attachShadow({mode:'open'}) — Lit, Stencil, FAST, and Shoelace default to open shadow roots
5. If target elements sit inside a closed shadow root, treat them as unreachable by Playwright; the only fix is getting the component author to switch to open mode