WXT

Appearance

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

Interface: ShadowRootContentScriptUiOptions<TMounted> ​

Options shared by integrated, shadow root, and iframe UIs.

position selects "inline", "overlay", or "modal" positioning. zIndex controls the positioning element's stacking level for overlays and modals. alignment is available for overlays.

Contents ​

Type parameters ​

▪ TMounted

Properties ​

alignment ​

alignment?: ContentScriptOverlayAlignment

When using position: "overlay", the mounted element is 0px by 0px in size. Alignment specifies which corner is aligned with that 0x0 pixel space.

Visualization of alignment options

Default ​

ts
'top-left'

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:52

anchor ​

anchor?: null | string | Element | () => undefined | null | string | Element

A CSS selector, XPath expression, element, or function that returns one of the three. Along with append, the anchor dictates where in the page the UI will be added.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:105

append ​

append?: ContentScriptAppendMode | (anchor, ui) => void

In combination with anchor, decide how to add the UI to the DOM.

  • "last" (default) - Add the UI as the last child of the anchor element
  • "first" - Add the UI as the first child of the anchor element
  • "replace" - Replace the anchor element with the UI.
  • "before" - Add the UI as the sibling before the anchor element
  • "after" - Add the UI as the sibling after the anchor element
  • (anchor, ui) => void - Customizable function that let's you add the UI to the DOM

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:122

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.

Source ​

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

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

Source ​

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

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

Source ​

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

mode ​

mode?: "closed" | "open"

ShadowRoot's mode.

Default ​

ts
'open'

See ​

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

Source ​

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

name ​

name: string

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

Source ​

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

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

Source ​

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

onRemove ​

onRemove?: (mounted) => void

Callback called before the UI is removed from the webpage. Use to cleanup your UI, like unmounting your Vue or React apps.

Note that this callback is called only when ui.remove is called - that means it is not called automatically when the anchor is removed, unless you use autoMount.

Parameters ​

▪ mounted: undefined | TMounted

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:24

position ​

position: "inline" | "overlay" | "modal"

Choose between "inline", "overlay", or "modal" positioning.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:50

zIndex ​

zIndex?: number

The z-index used on the positioning element. Set to a positive number to show your UI over website content.

Source ​

packages/wxt/src/utils/content-script-ui/types.ts:51

Generated using typedoc-plugin-markdown and TypeDoc