refactor folk-space to lit

src/folk-space.ts

@@ -1,4 +1,6 @@
-import { html, css } from './common/tags';
+import { css, PropertyValues } from '@lit/reactive-element';
+import { FolkElement } from './common/folk-element';
+import { html } from './common/tags';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -6,7 +8,10 @@ declare global {
   }
 }
 
-const styles = css`
+export class FolkSpace extends FolkElement {
+  static tagName = 'folk-space';
+
+  static styles = css`
     :host {
       display: block;
       perspective: 1000px;
@@ -42,24 +47,14 @@ const styles = css`
     .back {
       transform: rotateX(90deg);
     }
-`;
+  `;
 
-export class FolkSpace extends HTMLElement {
-  static tagName = 'folk-space';
+  override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
 
-  static define() {
-    if (customElements.get(this.tagName)) return;
-    customElements.define(this.tagName, this);
-  }
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
 
-  #shadow = this.attachShadow({ mode: 'open' });
-
-  constructor() {
-    super();
-
-    this.#shadow.adoptedStyleSheets.push(styles);
-
-    this.#shadow.setHTMLUnsafe(html`
+    this.renderRoot.setHTMLUnsafe(html`
       <div class="space">
         <div class="face front">
           <slot name="front"></slot>