Autopilot Client

Appearance

Shadow DOM isolation ​

The bar's overlay lives inside a Shadow DOM (mode: 'open'). This is the single biggest reason you can drop the bar into any page and it just works.

What is isolated ​

The overlay's Tailwind stylesheet is injected directly into the shadow root, so:

  • Page CSS does not affect the overlay. No accidental * { box-sizing: content-box } from the host page breaking layout, no button { color: white } from a global reset.
  • Overlay CSS does not affect the page. The Tailwind preflight only applies inside the shadow root.

What still crosses the boundary ​

Shadow DOM does not fully isolate everything. Worth knowing:

  • Inherited styles still inherit through the boundary. Most notably font-family, color, and line-height will inherit from your host. Override them on the overlay's root if you need different typography (the simplest fix is to set font-family on :host from the host page via ::part is not supported — see "Customizing typography" below).
  • CSS custom properties cross the boundary. A --something defined on :root is accessible inside the shadow root. The bar uses this for theming hooks (see below).
  • Events bubble up. Click/keyboard events from inside the overlay reach the host page's document-level listeners (composed events). Most listeners pierce shadow boundaries transparently.
  • document.querySelector does not reach into the shadow root. Your normal selectors will not find overlay nodes. Use the host element's .shadowRoot if you really need to inspect (rare).

The toggle button is not in Shadow DOM ​

The floating action button sits in the regular DOM, in a wrapper with the attribute data-autopilot-scope. Its styles are scoped using attribute selectors ([data-autopilot-scope] button { … }) so the button can:

  • Participate in the host page's stacking context.
  • Use the host's font.
  • Be visible to global utilities like analytics click handlers.

If your design system has aggressive resets that target button globally, scope them with :not([data-autopilot-scope] *) or accept that the FAB picks them up.

Customizing typography ​

To force a different font inside the overlay:

css
/* In your host page's stylesheet */
:root {
  /* Tailwind picks this up via inheritance for unscoped font-family rules */
  font-family: 'Inter', sans-serif;
}

Because font-family inherits, this reaches the shadow root automatically.

For tighter control you would need to fork the bar — the current build does not expose a ::part API.

Z-index ​

Both the toggle button and the overlay use high z-index values (in the millions). If your page also uses dramatic z-indexes and the bar disappears behind something, the offending host element is likely escaping its stacking context via position: fixed with no z-index. Audit with the browser inspector.

Inspecting the shadow root ​

In Chrome DevTools, find the host element (an element after your #app), and click the chevron next to #shadow-root (open). The full overlay component tree is inspectable like any other DOM.