Every element renders inside a scoped .overflow-element host with its own design-token layer. Merchant CSS on the host page cannot bleed into element chrome, and element CSS cannot bleed out.
How isolation works
- Each mounted element gets a host
<div class="overflow-element"> with its own scoped stylesheet.
- Design tokens (
--overflow-*) are written as inline styles on the host at mount time. The scoped stylesheet redeclares CSS variables that read from those host-scoped tokens, so every child element inside the host resolves against the merchant-configured values.
- Descendant selectors inside the scoped stylesheet are prefixed with
.overflow-element, so global CSS rules on the host page cannot match anything inside the element.
The upshot: setting input { border: 2px solid red } in your page CSS has no effect on Payment Elements inputs. Setting --overflow-color-primary inside a Payment Element does not leak to elements outside the host.
Secured card fields
The card element renders card number, expiration, and security code inside cross-origin iframes. CSS variables on the host page cannot cross iframe boundaries, so the SDK mirrors the relevant tokens (fontFamily, colorText, colorTextPlaceholder, colorDanger, inputFontSize, inputLineHeight) into the iframe’s style configuration at construction time.
The mirrored tokens update whenever you call card.update({ appearance: ... }). Tokens not in the mirror list stay isolated to the host and do not reach the iframe.
Custom fonts inside the secured card fields
Setting fontFamily is enough for native inputs. For fully custom webfonts inside the secured card fields, the fields need to be told how to load the font (via a font-loading configuration). Without that, custom fonts fall back to the system sans stack inside the secured card fields.
Focus events
Focus events from inside the secured card fields do not bubble to the host page as native DOM focus events. The SDK receives them out-of-band and mirrors focus state as a class on the field wrapper, so focus rings render consistently with native inputs. If you style secured card fields based on their focus state, key the rule off both :focus-within and the modifier class.
Apple Pay and Google Pay render inside their own isolated rendering surface. Focus events from inside those buttons are best-effort: they do not necessarily bubble out to the host page.
Overriding element chrome
The right way to change element visuals is through appearance, not page CSS:
Reaching into .overflow-element selectors with your own CSS is unsupported. Selectors change between minor releases and may break at any time.
See also
Last modified on July 17, 2026
