diff --git a/package.json b/package.json
index 4cecbf6..bec6c15 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@babel/parser": "^7.26.2",
+    "@lit/reactive-element": "^2.0.4",
     "leaflet": "^1.9.4",
     "perfect-arrows": "^0.3.7",
     "perfect-freehand": "^1.2.2"
diff --git a/src/common/folk-element.ts b/src/common/folk-element.ts
index 224b91c..2339a00 100644
--- a/src/common/folk-element.ts
+++ b/src/common/folk-element.ts
@@ -1,5 +1,7 @@
+import { ReactiveElement } from '@lit/reactive-element';
+
 // will eventually extend Lit's ReactiveElement
-export class FolkElement extends HTMLElement {
+export class FolkElement extends ReactiveElement {
   static tagName = '';
 
   static define() {
diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts
index 6845203..e4dbc48 100644
--- a/src/folk-base-connection.ts
+++ b/src/folk-base-connection.ts
@@ -9,7 +9,7 @@ function parseCSSSelector(selector: string): string[] {
 }
 
 export class FolkBaseConnection extends HTMLElement {
-  static tagName = 'folk-base-connection';
+  static tagName = '';
 
   static define() {
     if (customElements.get(this.tagName)) return;
diff --git a/src/folk-base-set.ts b/src/folk-base-set.ts
index 99efe04..1a42a86 100644
--- a/src/folk-base-set.ts
+++ b/src/folk-base-set.ts
@@ -2,16 +2,10 @@ import { ClientRectObserverEntry, ClientRectObserverManager } from './common/cli
 
 const clientRectObserver = new ClientRectObserverManager();
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'folk-base-set': FolkBaseSet;
-  }
-}
-
 const defaultRect = DOMRectReadOnly.fromRect();
 
 export class FolkBaseSet extends HTMLElement {
-  static tagName = 'folk-base-set';
+  static tagName = '';
 
   static define() {
     if (customElements.get(this.tagName)) return;