TESTHEON Practice Lab
BeginnerPW-SHD-00215 minutesPlaywright

Locate slotted light-DOM content

A custom-element host assigns visible light-DOM nodes to named slots.

  • locators
  • shadow-dom
  • assertions

Objective

What to automate

Locate the synthetic summary and assert its documented slot assignment.

Preconditions and test data

Preconditions

  • Use a fresh isolated Practice Lab browser context.
  • Open the fixture identified by FX-SHD-001.

Test data

  • summary: Slotted synthetic summary
  • slot: summary

Expected result

The summary is visible from the light DOM and has slot=summary.

Open practice pageRead related guide

Progressive hints

Hint 1

Locate the published summary text or its stable test id.

Hint 2

Assert the visible text before checking its slot attribute.

Hint 3

Do not treat slotted content as inaccessible closed-root content.

I’ve tried it — show solution
  1. Locate the published summary text or its stable test id.
  2. Assert the visible text before checking its slot attribute.
  3. Do not treat slotted content as inaccessible closed-root content.

The deliberately failing starter is in tests/shadow-dom.spec.ts inside the TypeScript starter ZIP.