1test('fills input inside a shadow DOM component', async ({ page }) => {
2  await page.goto('/web-components-demo');
3
4  // Playwright's locator API automatically pierces open shadow roots
5  const shadowInput = page.locator('my-input-component input');
6  await shadowInput.fill('hello');
7
8  await expect(shadowInput).toHaveValue('hello');
9});