API Reference - isolated-element ​

@webext-core/isolated-element

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
• An isolatedElement that you should mount your UI to.

Examples ​

const { isolatedElement, parentElement } = createIsolatedElement({
  name: 'example-ui',
  css: { textContent: "p { color: red }" },
});

// 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 };
}

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.

API reference generated by plugins/typescript-docs.ts