Dynamic attributes

Reactive attributes work like reactive text, but with one rule: the entire attribute value must be a single function interpolation.

# Correct

html`<div class=${() => `box ${active.value ? "on" : "off"}`}>...</div>`;

The whole string is produced by one function. When active changes, the function re-runs and the class is replaced.

# Wrong

html`<div class="box ${() => active.value}">...</div>`;

Partial interpolation is not reactive. The static part box would be fine, but the dynamic part would not update.

# Your task

Make the first button's class reactive: add btn-active when active is true. Also wire the first button's own click to toggle active.