bcf6ef63ad
Some checks failed
📦 Build / build (push) Has been cancelled
🧪 CI Test / test shard (1/4) (push) Has been cancelled
🧪 CI Test / test shard (2/4) (push) Has been cancelled
🧪 CI Test / test shard (3/4) (push) Has been cancelled
🧪 CI Test / test shard (4/4) (push) Has been cancelled
🧪 CI Test / test (push) Has been cancelled
🧪 CI Test / eslint (push) Has been cancelled
🧪 CI Test / typecheck (push) Has been cancelled
🔫 Sync to Pro / dispatch-sync (push) Has been cancelled
🔮 Sync Mirror / sync (push) Has been cancelled
@univerjs/ui-adapter-web-component
@univerjs/ui-adapter-web-component adapts Univer UI services for Web Component integrations.
Package Overview
| Package | UMD global | CSS | Locales | Facade entry |
|---|---|---|---|---|
@univerjs/ui-adapter-web-component |
UniverUiAdapterWebComponent |
No | No | No |
Installation
pnpm add @univerjs/ui-adapter-web-component
# or
npm install @univerjs/ui-adapter-web-component
Keep all @univerjs/* packages on the same version.
Usage
import { UniverWebComponentAdapterPlugin } from '@univerjs/ui-adapter-web-component';
univer.registerPlugin(UniverWebComponentAdapterPlugin);
Register custom elements with the web-component framework option. Runtime props are assigned to the created element as DOM properties, which supports object values such as data and extraProps.
class MyPopup extends HTMLElement {
set data(value: { label?: string } | undefined) {
this.textContent = value?.label ?? '';
}
}
univerAPI.registerComponent('my-popup', MyPopup, { framework: 'web-component' });