WXT

Appearance

API > wxt/utils/content-script-ui/shadow-root > ShadowRootContentScriptUiOptions

Type alias: ShadowRootContentScriptUiOptions<TMounted> ​

ShadowRootContentScriptUiOptions<TMounted>: ContentScriptUiOptions<TMounted> & object

Type declaration ​

css ​

css?: string

Custom CSS text to apply to the UI. If your content script imports/generates CSS and you've set cssInjectionMode: "ui", the imported CSS will be included automatically. You do not need to pass those styles in here. This is for any additional styles not in the imported CSS.

inheritStyles ​

inheritStyles?: boolean

By default, WXT adds all: initial to the shadow root before the rest of your CSS. This resets any inheritable CSS styles that normally pierce the Shadow DOM.

WXT resets everything but:

  • rem Units: they continue to scale based off the webpage's HTML font-size.
  • CSS Variables/Custom Properties: CSS variables defined outside the shadow root can be accessed inside it.
  • @font-face Definitions: Fonts defined outside the shadow root can be used inside it.

To disable this behavior and inherit styles from the webpage, set inheritStyles: true.

Default ​

ts
false

isolateEvents ​

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

mode ​

mode?: "open" | "closed"

ShadowRoot's mode.

See ​

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode

Default ​

ts
"open"

name ​

name: string

The name of the custom component used to host the ShadowRoot. Must be kebab-case.

onMount ​

onMount: (uiContainer, shadow, shadowHost) => TMounted

Callback executed when mounting the UI. This function should create and append the UI to the uiContainer element. It is called every time ui.mount() is called.

Optionally return a value that can be accessed at ui.mounted or in the onRemove callback.

Parameters ​

▪ uiContainer: HTMLElement

▪ shadow: ShadowRoot

▪ shadowHost: HTMLElement

Type parameters ​

Parameter
TMounted

Source ​

packages/wxt/src/utils/content-script-ui/shadow-root.ts:128

Generated using typedoc-plugin-markdown and TypeDoc