Components #

Notes #

• Initially considered nanotags for component logic, but I'm currently reaching point with it not being appropriate for this:
  • Definitely better for hydrating existing markup and pairs well (but not exclusively) with static site generators.
  • I like the decision to not use the Shadow DOM.
• Aiming for rendering libraries that are small and don't need their own Vite plugin.
  • lit-html function should be enough.
• Hmm. Perhaps nanostore isn't right either. I don't want to manage re-renders when a slice of state data changes.
  • A signals library should help close this gap.
• @lit-labs/signals is a nice addition
• Currently thinking about the event listening and coordination
  • I might need to pull in lit's web component portion.
  • But if I'm doing that, I have to consider the Shadow DOM styles :c
  • Gah!
• Lit does support a way to render components in the Light DOM
  • Implementing createRenderRoot
  • Normally, I wouldn't reach for this, but I am explicitly wanting my global styles to work here
    • Another reason why I wanted nanotags to work
    • I don't want to manually re-opt into receiving the cascade
• With this, I can go ahead and move into web components for emitting custom events
  • Nevermind, somewhere in this setup, Vite/TypeScript doesn't play well together
  • I'll see about continuing with my manual lit-html setup
  • Oh right, I can still emit CustomEvents. Okay, problem solved.
• Hmm. Now I'm at a fork in the road between signals and nanostores
  • I want to utilize signals (via @lit-labs/signals) since it's meant to integrate the Signals proposal.
    • Provides integration with lit and lit-html
    • Would eventually be a built-in language feature
  • On the other hand
    • The signal-polyfill is based on the proposal that is currently at Stage 1, which is always up for change
    • @lit-labs/signals is also marked as experimental
  • Considering making a custom lit-html integration with nanostores.
    • @nanostores/lit assumes use of LitElement / web components
    • Thankfully lit provides an awesome async directives tutorial