Custom Styles

StrutFit widgets are web components that use an open shadow root. Your page CSS does not apply inside the shadow tree by default, which keeps StrutFit markup and styles isolated from the rest of the site.

To customize appearance beyond what we support out of the box, you can target CSS shadow parts with the ::part() pseudo-element on the host element (for example strutfit-size-button::part(button)).

Prefer component attributes first. Each widget exposes styling-related props (colors, fonts, margins, variants, and so on). Check the component guide and options reference before using ::part overrides—use custom part styling when you need changes that are not available through those standard props.

Naming pattern

Across components we generally expose:

container — outer wrapper around the widget.
Primary control — often button (clickable control); the fit tip uses content for its inner layout instead.
text — label or body copy.
icon — optional icon wrapper (try-on, size chart, size button when the icon is shown).
tooltip — size button only; the optional CTA bubble next to the button (see Size Button CTA).

When you set an id attribute on the host element (where the component supports it), we also add suffixed part names so you can target one instance among many. The part attribute lists both the generic name and the id-specific name, for example button and button-pdp when id="pdp".

Using `::part()` in your CSS

Selectors take the form:


strutfit-size-button::part(button) {
  /* styles apply to the exposed button part */
}

You can combine host-level context (wrapper classes, layout) with ::part:


.product-actions strutfit-tryon-button::part(button) {
  border-radius: 999px;
}

To target a specific instance when several share a page, use the suffixed part name (it must match the host id):


strutfit-size-button::part(button-checkout) {
  min-width: 200px;
}

Or scope with a parent class and the generic button part if only one button lives in that region:


.pdp-sidebar strutfit-size-button::part(button) {
  width: 100%;
}

Parts by component

Host element	Parts	Id-specific parts	Notes
`strutfit-tryon-button`	`container`, `button`, `text`, `icon`	Yes, when `id` is set	Try On Button — options
`strutfit-size-chart-button`	`container`, `button`, `text`, `icon`	Yes, when `id` is set	Size Chart Button — options
`strutfit-size-button`	`container`, `tooltip`, `button`, `icon`, `text`	Yes, when `id` is set	Size Button — options. `tooltip` applies when the Size Button CTA is visible.
`strutfit-fit-tip`	`container`, `content`, `text`	Yes, when `id` is set	Fit Tip — options. Inner layout uses `content`, not `button`. The icon is not exposed as a part today.
`strutfit-chat-bot-bubble`	`container`, `button`	No suffixed parts in the current implementation	Chat Bot Bubble — options. The chat glyph is inside the `button` part; there are no separate `text` or `icon` parts.

Example


/* All size buttons: emphasize the control outline */
strutfit-size-button::part(button) {
  outline-offset: 2px;
}
 
/* One instance by id (host: id="pdp-size") */
strutfit-size-button::part(button-pdp-size) {
  text-transform: uppercase;
}
 
/* Try-on button inside a themed wrapper */
.theme-dark strutfit-tryon-button::part(button) {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

Only properties that apply to the exposed element type (for example the button part is a real <button>) will have an effect; unsupported or inherited properties may be limited by shadow internal styles.

Custom Styles

Naming pattern

Using ::part() in your CSS

Parts by component

Example

Using `::part()` in your CSS