diff --git a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx index 8ac8899b81..9b2e97f979 100644 --- a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx +++ b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx @@ -1,4 +1,5 @@ import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; import { nanoid } from 'nanoid'; import { useCallback, useMemo, useState } from 'react'; import ReactDOM from 'react-dom'; @@ -24,6 +25,9 @@ export function createLitPortalAnchor(callback: (event: PortalEvent) => void) { return html``; } +export const LIT_REACT_PORTAL = 'lit-react-portal'; + +@customElement(LIT_REACT_PORTAL) class LitReactPortal extends LitElement { portalId: string = ''; @@ -69,11 +73,9 @@ class LitReactPortal extends LitElement { } } -window.customElements.define('lit-react-portal', LitReactPortal); - declare global { interface HTMLElementTagNameMap { - 'lit-react-portal': LitReactPortal; + [LIT_REACT_PORTAL]: LitReactPortal; } } diff --git a/packages/frontend/component/src/lit-react/to-react-node.ts b/packages/frontend/component/src/lit-react/to-react-node.ts index 88b7c17b39..10b69be11a 100644 --- a/packages/frontend/component/src/lit-react/to-react-node.ts +++ b/packages/frontend/component/src/lit-react/to-react-node.ts @@ -1,8 +1,10 @@ import { LitElement, type TemplateResult } from 'lit'; +import { customElement } from 'lit/decorators.js'; import React, { createElement, type ReactNode } from 'react'; import { createComponent } from './create-component'; +@customElement('affine-lit-template-wrapper') export class LitTemplateWrapper extends LitElement { static override get properties() { return { @@ -20,8 +22,6 @@ export class LitTemplateWrapper extends LitElement { } } -window.customElements.define('affine-lit-template-wrapper', LitTemplateWrapper); - const TemplateWrapper = createComponent({ elementClass: LitTemplateWrapper, react: React,