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
Checked attribute, checked property, wired to update each other, and now the tab freezes the instant someone clicks the checkbox.
What you'll have at the end
A checked getter and setter where only the property writes the attribute, so toggling it once no longer re-triggers itself
You need
A custom element whose checked property and checked attribute are wired to update each other: the setter writes the attribute, and attributeChangedCallback assigns the property back, already freezing the tab on a real click.
Not covered
Reflecting a property whose value is a string or number instead of an on/off flag, where the getter can't just check whether the attribute exists at all: that needs its own guard variable, a different fix from this one.
A property set too early silently vanishes
for the other common attribute/property timing bug, where the value disappears instead of looping, because the class definition hadn't loaded yet
Test a custom element through its public API, not its shadow internals
for writing a test that exercises the fixed checked property and attribute through the public API once the reentrancy is gone
Checked 25 Aug 2026
Part of the Web Components cookbook