Apply Brand Theming to Embedded MFE Widgets (Developer Preview)

Keep embedded widgets visually consistent with your brand. Propagate design tokens into sandboxed iframes using standard CSS custom properties without additional JavaScript wiring inside the widget.

Where: This change applies to Lightning Experience, Experience Builder sites, and Experience Cloud LWR sites in all editions.

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at Agreements - Salesforce.com.

How: Set CSS custom properties on the <lwc-shell> element or any ancestor element in your wrapper LWC. For example: style="--brand-color:#0070d2; --font-family:Salesforce Sans,sans-serif;".

Inside the widget, reference tokens with standard CSS: color: var(--brand-color).

The shell reads all --* properties from its computed style via getComputedStyle(this) once at mount and forwards them to the iframe. The shell does not observe host-side style mutations automatically.

To update tokens at runtime — for example, when a user switches to dark mode:

1. Set new values on the host element with style.setProperty().
2. Call shell.refreshTheme() to re-scrape computed styles and forward the updated tokens.

Keep these considerations in mind:

• Only CSS custom properties (names starting with --) cross the iframe boundary. Regular CSS declarations (color, background) on the host don't propagate.
• Tokens must be declared on the <lwc-shell> element or an ancestor element. Tokens on sibling elements don't propagate — getComputedStyle(this) reads from the shell's own inheritance chain.