Web Components

nanotags is a thin Web Components wrapper powered by Nano Stores reactivity. It leans on the platform—Custom Elements, standard DOM, regular CSS—instead of reinventing them. The result is a typed, reactive component model with automatic cleanup in under 2.5 KB.

<x-counter count="0">
  <span data-ref="display">0</span>
  <button data-ref="increment">+1</button>
</x-counter>

import { define } from 'nanotags'

const Counter = define('x-counter')
  .withProps(p => ({
    count: p.number()
  }))
  .withRefs(r => ({
    increment: r.one('button'),
    display: r.one('span')
  }))
  .setup(ctx => {
    ctx.on(ctx.refs.increment, 'click', () => {
      ctx.props.$count.set(ctx.props.$count.get() + 1)
    })

    ctx.effect(ctx.props.$count, value => {
      ctx.refs.display.textContent = String(value)
    })
  })

---

Imported from the Nano Stores README for version 1.5.5. Improve this page there.