Styling

All SpartanAuth widgets render inside Shadow DOM, which means their internal markup and styles are isolated from your application’s global CSS. Your stylesheets cannot reach inside the widget — and the widget’s styles cannot leak out into your page.

To customize the widget’s appearance, use the styles attribute.

The styles attribute

Pass a CSS string to inject directly into the widget’s shadow root:

<spartan-login
  domain="https://api.spartanauth.com"
  sector="your-sector-id"
  styles=".login-frame button { background-color: #ff6600; color: white; border-radius: 8px; }">
</spartan-login>

The CSS string is injected as a <style> element inside the shadow root, so it can target any internal class.

Dynamic styles in Vue

In Vue, bind the styles attribute dynamically:

<template>
  <spartan-login
    :styles="widgetStyles"
    domain="https://api.spartanauth.com"
    sector="your-sector-id">
  </spartan-login>
</template>

<script setup lang="ts">
const widgetStyles = `
  .login-frame {
    font-family: 'Inter', sans-serif;
    border-radius: 12px;
  }
  .login-frame button {
    background-color: var(--brand-primary, #3b82f6);
    border-radius: 6px;
  }
`;
</script>

Using CSS custom properties

The widget’s internal styles may reference CSS custom properties. You can override these from outside the shadow root — custom properties pierce the shadow boundary:

/* Your global CSS */
spartan-login {
  --brand-primary: #7c3aed;
  --brand-text: white;
}

Inspecting widget internals

To find the CSS class names you can target:

1. Open Chrome DevTools
2. Check “Show user agent shadow DOM” in DevTools Settings → Elements
3. Inspect the <spartan-login> element — you’ll see the shadow root and internal markup

Tips

• Keep your styles string focused — only override what you need
• Use CSS custom properties for theming when possible (they pierce shadow DOM)
• For major layout changes, test across the widget’s different states (login, MFA challenge, sign-up, password reset) to make sure your styles look good in all flows