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,60 +8,53 @@ declare global {
   }
 }
 
-const styles = css`
-  :host {
-    display: block;
-    perspective: 1000px;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .space {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transform-style: preserve-3d;
-    transform-origin: center;
-    transition: transform 0.6s;
-  }
-
-  .space.rotate {
-    transform: rotateX(-90deg);
-  }
-
-  .face {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-  }
-
-  .front {
-    transform: rotateX(0deg);
-  }
-
-  .back {
-    transform: rotateX(90deg);
-  }
-`;
-
-export class FolkSpace extends HTMLElement {
+export class FolkSpace extends FolkElement {
   static tagName = 'folk-space';
 
-  static define() {
-    if (customElements.get(this.tagName)) return;
-    customElements.define(this.tagName, this);
-  }
+  static styles = css`
+    :host {
+      display: block;
+      perspective: 1000px;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
 
-  #shadow = this.attachShadow({ mode: 'open' });
+    .space {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      transform-origin: center;
+      transition: transform 0.6s;
+    }
 
-  constructor() {
-    super();
+    .space.rotate {
+      transform: rotateX(-90deg);
+    }
 
-    this.#shadow.adoptedStyleSheets.push(styles);
+    .face {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+    }
 
-    this.#shadow.setHTMLUnsafe(html`
+    .front {
+      transform: rotateX(0deg);
+    }
+
+    .back {
+      transform: rotateX(90deg);
+    }
+  `;
+
+  override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    this.renderRoot.setHTMLUnsafe(html`
       <div class="space">
         <div class="face front">
           <slot name="front"></slot>