Integration

Check these conditions when connecting existing controls, decorations or changing layouts. They apply to the shared DOM engine and CSS bindings.

Keep existing decorations

Edge draws its border decoration in ::after by default. Choose pseudoElement: 'before' when your component already uses ::after. If both slots are occupied, apply Edge to a wrapper. This is a CSS constraint, independent of your framework.

The React example below uses the same decoration-slot option exposed by the shared style bindings.

Your existing ::after stays intact.

The default keeps your ::before intact.

Decoration uses ::before

import { Lighting } from '@bolerish/edge';

<Lighting>
  <Lighting.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Lighting.Surface>
</Lighting>

The example becomes interactive when JavaScript is enabled.

import { Lighting } from '@bolerish/edge';

<Lighting>
  <Lighting.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Lighting.Surface>
</Lighting>

Wrap native inputs

Native inputs do not reliably support the pseudo-elements used for decoration. Register a label or div around the input instead, matching the control’s radius. Keep its label, focus indicator, validation and keyboard behavior intact. The recessed style is useful for input wrappers.

Refresh after layout changes

Size changes, nested scrolling, viewport resizing, font loading and resource loads invalidate cached geometry automatically. When your application moves a surface or changes its host border thickness without a size notification, call light.refresh() after the new layout is applied. This also schedules an update while the pointer is stationary.

See the React API reference for the adapter-specific call.

Geometry and document boundaries

The effect approximates axis-aligned rectangles. Rotation, perspective transforms and cross-document portals are unsupported. Same-document portals can share a light. Preserve focus, selection and validation independently of decorative lighting; see Accessibility.