API Reference

createIsolatedElement

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.

Parameters

• options: CreateIsolatedElementOptions

Returns

A parentElement that can be added to the DOM, the shadow root, and an isolatedElement that you should mount your UI to.

Examples

  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';
  isolatedElement.appendChild(ui);

  // Add the UI to the DOM
  document.body.appendChild(parentElement);

CreateIsolatedElementOptions

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

Options that can be passed into createIsolatedElement.

Properties

• name: string
  An HTML tag name used for the shadow root container.

Note that you can't attach a shadow root to every type of element. There are some that can't have a shadow DOM for security reasons (for example ).

• 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 docs/generate-api-references.ts