Skip to content
On this page

API Reference - isolated-element

@webext-core/isolated-element

createIsolatedElement

ts
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

Returns

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

Examples

ts
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

ts
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
    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.