Jul 2, 2026 · 1 min read

Preview test

test

HTML + CSS preview (Declarative Shadow DOM)

This one ships zero client JavaScript. The design tokens below resolve through the shadow boundary, so it follows light/dark automatically.

Button states

HTML

<button class="btn">Click me</button>

CSS

.btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--accent-surface-color);
  color: var(--accent-surface-text-color);
  font: inherit;
  cursor: pointer;
}
.btn:hover {
  background: var(--accent-surface-text-hover-color);
}

Interactive JS preview (lazy srcdoc iframe)

This one loads on scroll and runs in an isolated, null-origin sandbox.

Counter JS

HTML

<button class="counter">Clicked 0 times</button>

CSS

.counter {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface-2-color);
  color: var(--text-color);
  font: inherit;
  cursor: pointer;
}

const b = document.querySelector('.counter');
let n = 0;
b.addEventListener('click', () => {
n += 1;
b.textContent = 'Clicked ' + n + ' times';
});