jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor folk-space to lit

This commit is contained in:
“chrisshank” 2024-12-10 15:24:32 -08:00
parent 50c07fcf81
commit ebe6c71c08
1 changed files with 44 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/folk-space.ts
View File

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