> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS isolation

> How element chrome is isolated from your page CSS.

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

1. Each mounted element gets a host `<div class="overflow-element">` with its own scoped stylesheet.
2. 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.
3. 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.

## Wallet buttons

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:

```javascript theme={null}
new Overflow('live_pub_...', {
  appearance: {
    variables: {
      inputBorderRadius: '0px',
      colorBorder: '#000',
    },
  },
});
```

Reaching into `.overflow-element` selectors with your own CSS is unsupported. Selectors change between minor releases and may break at any time.

## See also

* [Theming overview](/payment-elements/theming/overview)
* [Token reference](/payment-elements/theming/token-reference)