WXT

Appearance

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

Type Alias: ShadowRootContentScriptUiOptions<TMounted> ​

ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & object

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

Type Declaration ​

css? ​

optional 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? ​

optional 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? ​

optional 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? ​

optional mode?: "open" | "closed"

ShadowRoot's mode.

Default ​

ts
'open'

See ​

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

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

Returns ​

TMounted

Type Parameters ​

TMounted ​

TMounted

Generated using typedoc-plugin-markdown and TypeDoc