Skip to content
On this page

API Reference - isolated-element



async function createIsolatedElement(
  options: CreateIsolatedElementOptions
): Promise<{
  parentElement: HTMLElement;
  isolatedElement: HTMLElement;
  shadow: ShadowRoot;
}> {
  // ...

Create an HTML element that has isolated styles from the rest of the page.



  • A parentElement that can be added to the DOM
  • The shadow root
  • An isolatedElement that you should mount your UI to.


const { isolatedElement, parentElement } = createIsolatedElement({
  name: 'example-ui',
  css: { textContent: "p { color: red }" },
  isolateEvents: true // or ['keydown', 'keyup', 'keypress']

// Create and mount your app inside the isolation
const ui = document.createElement("p");
ui.textContent = "Example UI";

// Add the UI to the DOM


interface CreateIsolatedElementOptions {
  name: string;
  mode?: "open" | "closed";
  css?: { url: string } | { textContent: string };
  isolateEvents?: boolean | string[];

Options that can be passed into createIsolatedElement.


  • name: string
    A unique tag name used when defining the web component used internally. Don't use the same name twice for different UIs.

  • mode?: 'open' | 'closed' (default: 'closed')
    See ShadowRoot.mode.

  • css?: { url: string } | { textContent: string }
    Either the URL to a CSS file or the text contents of a CSS file. The styles will be mounted inside the shadow DOM so they don't effect the rest of the page.

  • isolateEvents?: boolean | string[]
    When enabled, event.stopPropagation will be called on events trying to bubble out of the shadow root.

  • Set to true to stop the propagation of a default set of events, ["keyup", "keydown", "keypress"]

  • Set to an array of event names to stop the propagation of a custom list of events

API reference generated by plugins/typescript-docs.ts

Released under the MIT License.