Web Component

If you are looking for how to use Web Component components as custom components, please refer to here.

Univer can be integrated into Web Components.

Preview

Example

The following code is an example of integrating Univer into a Web Component using Lit.

TypeScript

import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import docsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { html, LitElement } from 'lit'class MyWebComponent extends LitElement {  override firstUpdated() {    const container = this.renderRoot.querySelector('#containerId') as HTMLDivElement    const { univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          docsCoreEnUS,        ),      },      presets: [        UniverDocsCorePreset({          container,        }),      ],    })    univerAPI.createDocument({})  }  override render() {    return html`      <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-docs-core/lib/index.css">      <div style="height: 100%;" id="containerId" />    `  }}window.customElements.define('my-univer', MyWebComponent)

How is this guide?