> ## 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.

# Element-scoped overrides

> Layer per-element appearance on top of the instance theme.

Every standalone element accepts an `appearance` field that layers on top of the instance-level theme. Use this when a single page mounts multiple elements and a subset needs different chrome (for example, a card at the default size and a bank field at `compact`).

## Example

```javascript theme={null}
const overflow = new Overflow('live_pub_...', {
  appearance: {
    size: 'normal',
    variables: { colorPrimary: '#3b82f6' },
  },
});

// Inherits the instance theme verbatim.
overflow.card().mount('#card');

// Overrides size and one token; still inherits colorPrimary.
overflow.bank({
  appearance: {
    size: 'compact',
    variables: { inputBorderRadius: '0px' },
  },
}).mount('#bank');
```

## Cascade order (deepest wins)

1. SDK defaults.
2. Instance `appearance.size` host class.
3. Instance `appearance.variables` inline styles.
4. Element `appearance.size` host class (replaces the instance size class on this element only).
5. Element `appearance.variables` inline styles.

## Merge, not replace

Element variables override instance variables only on per-key conflict. Instance keys absent from the element override are preserved.

```javascript theme={null}
overflow.card({
  appearance: {
    variables: { inputHeight: '48px' },
  },
}).mount('#card');

// Card renders with inputHeight: '48px' AND colorPrimary from the instance.
```

`appearance.size` also wins per element. Setting `size: 'compact'` on the element swaps the size-preset class on that element's host; the instance-level size class is removed from that host first.

## Runtime updates

Call `element.update({ appearance: { variables: { ... } } })` to change tokens without remounting:

```javascript theme={null}
card.update({ appearance: { variables: { inputHeight: '48px' } } });
```

The token is written to the host as an inline style. Tokens removed from the config are cleared, so switching themes never leaks stale values.

## Composite elements

`appearance` is not allowed on sub-elements nested inside `checkout` (or on the `fields.fullName` slot of `billingAddress` and `shippingAddress`). Composite elements are themed as one cohesive visual unit. Setting `appearance` on a nested slot is a TypeScript error:

```typescript theme={null}
overflow.checkout({
  paymentMethods: ['card', 'bank'],
  card: {
    appearance: { variables: { colorPrimary: '#f00' } }, // Type error
  },
});
```

To diverge a sub-element's chrome, mount it standalone instead.

## See also

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