Authentified Docs

Appearance

Styling ​

The JS Widget renders inside a shadow root, so host page CSS cannot accidentally bleed in and your selectors won't accidentally match against widget internals. Customisation happens through CSS custom properties (which cross the shadow boundary) declared on the marker element from your host page.

Default style ​

Widget

Default hover style ​

Widget Hover

Overriding the default styles ​

The widget shares its stylesheet with the React Widget via @authentified/shared-widget, so the same --authentified-* CSS custom properties apply. Declare any of them on the marker element (or one of its ancestors) and the value cascades into the shadow root.

css
[data-authentified-widget] {
  --authentified-button-bg-color: #fff;
  --authentified-button-border-color: #000;
  --authentified-button-color: #000;

  --authentified-button-bg-color--hover: #000;
  --authentified-button-color--hover: #fff;
}
Default CSS variables ​
css
:host {
  --authentified-button-bg-color: #fff;
  --authentified-button-border-color: #000;
  --authentified-button-border-radius: 0px;
  --authentified-button-border-style: solid;
  --authentified-button-border-width: 1px;
  --authentified-button-color: #000;
  --authentified-button-max-width: 30em;
  --authentified-button-padding: 0.75em 2.5em 0.6em;
  --authentified-button-transition: all ease-in 0.13s;

  --authentified-button-bg-color--hover: #000;
  --authentified-button-border-color--hover: #000;
  --authentified-button-color--hover: #fff;

  --authentified-button-sold-bg-color: #fff;
  --authentified-button-sold-border-color: rgba(0, 0, 0, 0.2);
  --authentified-button-sold-border-style: solid;
  --authentified-button-sold-border-width: 1px;
  --authentified-button-sold-color: #525252;

  --authentified-button-sold-border-color--hover: #000;
  --authentified-button-sold-bg-color--hover: #000;
  --authentified-button-sold-color--hover: #fff;
}

Targeting the sold variant ​

When the item is sold, the anchor inside the shadow root receives a data-authentified-state="sold" attribute. Different defaults apply automatically (via the --authentified-button-sold-* variables above). You can override those without inspecting label text.

Content Security Policy ​

The widget applies its stylesheet via Constructable Stylesheets, which is not blocked by strict style-src CSP directives — you do not need to allow 'unsafe-inline' to use this widget.

Older browsers that lack Constructable Stylesheets automatically fall back to an inline <style> tag inside the shadow root.

© Authentified 2026