Slide 53
Slide 53 text
import { createRoot } from "react-dom/client";
import { MoanaSampleButton as SampleButton } from "@heyinc/portable-moana-react";
import sanitize from "@heyinc/portable-moana-react/dist/assets/sanitize.css?inline";
import styles from "@heyinc/portable-moana-react/dist/assets/index.css?inline";
import { LitElement } from "lit";
import { customElement } from "lit/decorators.js";
@customElement("moana-sample-button")
export class MoanaSampleButton extends LitElement {
connectedCallback() {
const domNode = document.createElement("div");
const shadow = this.attachShadow({ mode: "closed" });
shadow.appendChild(domNode);
const sanitizeSheet = new CSSStyleSheet();
sanitizeSheet.replaceSync(sanitize);
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(styles);
shadow.adoptedStyleSheets = [sanitizeSheet, styleSheet];
const root = createRoot(domNode);
const label = this.getAttribute("label") || "ボタン";
root.render();
}
}
declare global {
interface HTMLElementTagNameMap {
"moana-sample-button": MoanaSampleButton;
}
}