New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
How do you test a custom element without every assertion reaching straight into shadowRoot to grab a value?
What you'll have at the end
A test suite that only touches attributes, properties, events and slotted content, and still fails when the component's behavior actually breaks
You need
A custom element already registered with customElements.define, and a Vitest test file that can run against a simulated DOM.
Not covered
Testing a form-associated element's validity and submission through ElementInternals: jsdom's implementation is missing those methods entirely, so that needs a real browser instead.
Package a repeated UI block as a shadow-encapsulated custom element
for the component this suite is written against, if you have not built one yet
Fix an attribute and property stuck reflecting each other forever
for the reflection bug this suite's attribute assertions would have caught before it shipped
Checked 25 Aug 2026
Part of the Web Components cookbook