diff --git a/src/components/README.md b/src/components/README.md
index a65aa58..09077d6 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -14,3 +14,12 @@
   - 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`](https://lit.dev/docs/components/shadow-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 `CustomEvent`s. Okay, problem solved.
diff --git a/src/components/board.ts b/src/components/board.ts
index 0775d29..120319a 100644
--- a/src/components/board.ts
+++ b/src/components/board.ts
@@ -10,7 +10,12 @@ import { Hand } from './hand'
 export function Board() {
   const nextCard = signal<GameCard>(createCard(1))
 
-  return html`<div class="board">
+  return html`<div
+    class="board"
+    @card:click=${(event: CustomEvent<GameCard>) => {
+      console.log('card:click', event.detail)
+    }}
+  >
     <div class="card-preview">${Card(nextCard)}</div>
     <div class="hand-list">
       ${Hand(
diff --git a/src/components/card.ts b/src/components/card.ts
index ce3d23f..6707918 100644
--- a/src/components/card.ts
+++ b/src/components/card.ts
@@ -1,14 +1,22 @@
-import { computed, signal, watch } from '@lit-labs/signals'
-import { html } from 'lit-html'
+import { computed, watch } from '@lit-labs/signals'
+import { html, nothing } from 'lit-html'
 
 import type { GameCard } from '#lobo/card.ts'
 import { toValue, type MaybeSignal } from '#types/signal.ts'
 
-export function Card(card: MaybeSignal<GameCard>) {
+export function Card(card: MaybeSignal<GameCard>, selected: boolean | null = null) {
   const value = computed(() => toValue(card).value)
-  const selected = signal(false)
-  const toggle = () => selected.set(!selected.get())
-  return html`<button type="button" class="card" aria-pressed=${watch(selected)} @click=${toggle}>
+
+  function click(this: HTMLButtonElement) {
+    this.dispatchEvent(new CustomEvent('card:click', { bubbles: true, detail: toValue(card) }))
+  }
+
+  return html`<button
+    type="button"
+    class="card"
+    aria-pressed=${selected ?? nothing}
+    @click=${click}
+  >
     <span class="card-value">${watch(value)}</span>
   </button>`
 }