Widget practice · Web components

Shadow DOM practice

Three custom elements (<tta-input-card>, <tta-counter>, <tta-nested>) build their UI inside an open shadow root. Modern Playwright pierces shadow boundaries automatically — most of the time you can write the same selector you'd use for regular DOM. The third example nests one custom element inside another, so chained piercing comes into play.

① `<tta-input-card>` — single shadow root

Inputs, a button, and a status line live entirely inside the component's shadow root. Targets like tta-input-card input[name="email"] still work.

id=card-1 data-testid=card-account tag=tta-input-card shadow inputs=name=email · name=password shadow button=data-testid=card-submit

No submission yet.

② `<tta-counter>` — buttons with role + aria-label

A counter component with shadow-internal increment / decrement buttons that expose role="button" and aria-labels for accessible-name locators.

data-testid=counter-cart · counter-quantity shadow buttons=role=button · aria-label="Decrement"/"Increment" readout=data-testid=counter-value

③ `<tta-nested>` — shadow inside shadow

An outer custom element renders an inner <tta-input-card> inside its own shadow root. Playwright pierces both layers in one selector.

data-testid=nested-host outer shadow=tta-nested inner shadow=tta-input-card[data-testid=card-inside]

What students should practise

Fill the email + password inside tta-input-card and submit, asserting the JSON output.
Click Increment on the cart counter twice and assert the readout reaches 5.
Use getByRole('button', { name: 'Decrement' }) scoped to one counter so you don't hit the other.
Drill into the tta-nested > tta-input-card inner field with one selector.
Compare auto-piercing with explicit shadow traversal via page.locator('tta-input-card').locator('input[name="email"]').

Playwright solution Shadow boundaries are pierced by default in modern Playwright. Show solution

// 1) tta-input-card — fill via the regular DOM-style selector
const card = page.getByTestId('card-account');
await card.locator('input[name="email"]').fill('[email protected]');
await card.locator('input[name="password"]').fill('pw');
await card.getByTestId('card-submit').click();
await expect(page.getByTestId('card-output'))
  .toContainText('[email protected]');

// 2) tta-counter — accessible-name targeting works through shadow
const cart = page.getByTestId('counter-cart');
await cart.getByRole('button', { name: 'Increment' }).click();
await cart.getByRole('button', { name: 'Increment' }).click();
await expect(cart.getByTestId('counter-value')).toHaveText('5');

// 3) Nested shadow — one selector reaches both layers
await page
  .getByTestId('nested-host')
  .locator('tta-input-card[data-testid="card-inside"] input[name="email"]')
  .fill('[email protected]');

// Explicit traversal still works if you prefer it readable
await page
  .locator('tta-nested')
  .locator('tta-input-card')
  .locator('input[name="email"]')
  .fill('[email protected]');

Shadow DOM practice

① <tta-input-card> — single shadow root

② <tta-counter> — buttons with role + aria-label

③ <tta-nested> — shadow inside shadow

① `<tta-input-card>` — single shadow root

② `<tta-counter>` — buttons with role + aria-label

③ `<tta-nested>` — shadow inside shadow