Lit

Use @nanostores/lit and StoreController reactive controller to get store’s value and re-render component on store’s changes.

import { StoreController } from '@nanostores/lit'

import { $profile } from '../stores/profile.js'

@customElement('my-header')
class MyElement extends LitElement {
  @property()
  private profileController = new StoreController(this, $profile)

  render() {
    return html`<header>Hi, ${profileController.value.name}</header>`
  }
}

---

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