Advanced Styling with CSS Parts & Variables

While declarative attributes handle foundational colors and typography, modern web products often demand bespoke styling—such as frosted glass sidebars, multi-stop gradient buttons, custom focus rings, or branded card containers.

Because RapiDoc is implemented as a standard W3C Web Component, standard external CSS selectors cannot pierce the Shadow DOM boundary. To give you complete design freedom without sacrificing encapsulation, RapiDoc exposes CSS Shadow Parts (::part()) and CSS Custom Properties (Variables).

---

1. How ::part() Piercing Works

In your parent application stylesheet or <style> block, target <rapi-doc> followed by ::part(part-name):

/* Target the navigation sidebar panel inside RapiDoc */
rapi-doc::part(section-navbar) {
  background: linear-gradient(180deg, #090d16 0%, #030712 100%);
  border-right: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

/* Target the header wrapper inside the navigation bar */
rapi-doc::part(section-navbar-header) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
}

CSS Part Chaining & Pseudo-Classes

CSS Shadow Parts support standard CSS pseudo-classes such as :hover, :focus, and :active. For example, rapi-doc::part(btn-fill):hover styles the primary action button on hover.

---

2. Complete CSS Shadow Parts Catalog

Below is the complete catalog of all semantic CSS parts exposed by RapiDoc, automatically loaded from the shared styling specification:

Navigation Sidebar

Parts for customizing the sidebar navigation panel, filter inputs, and route links.

Part Name (::part)	HTML Target	Description & Usage
::section-navbar	<nav>	Outer navigation sidebar container.
::section-navbar-header	<div>	Header wrapper container inside the sidebar encapsulating the nav logo slot and filter search container.
::btn-navbar	<button>	Mobile hamburger toggle button to open or collapse the navigation sidebar.
::section-navbar-search	<div>	Container wrapping the filter search input inside the navigation sidebar.
::textbox-nav-filter	<input>	Text input element used for real-time search filtering in the sidebar.
::btn-clear-filter	<button>	Clear button inside the sidebar search input.
::section-navbar-scroll	<div>	Scrollable inner container holding all tags, endpoints, and markdown headings.
::section-navbar-item	<div>	Base part applied to every clickable item in the navigation sidebar.
::section-navbar-overview	<div>	Sidebar item pointing to the API Overview section.
::section-navbar-servers	<div>	Sidebar item pointing to the API Servers section.
::section-navbar-auth	<div>	Sidebar item pointing to the Authentication section.
::section-navbar-operations-top	<div>	Sidebar item pointing to the top of the operations list.
::section-navbar-tag	<div>	Sidebar item representing an OpenAPI tag heading.
::section-navbar-path	<div>	Sidebar item representing an individual endpoint operation (e.g., GET /users).

Header & Branding

Parts for the top utility header, logo slot, and dynamic spec loader.

Part Name (::part)	HTML Target	Description & Usage
::section-header	<header>	Top utility header bar container.
::section-logo	<slot>	Slot container for the brand logo or icon.
::label-header-title	<div>	Title text displayed in the header bar.
::textbox-spec-url	<input>	Input field for entering an OpenAPI specification URL dynamically.
::textbox-header-filter	<input>	Search filter input in the header bar.

Main Canvas & Overview

Parts for the primary document canvas, spec title, and info anchors.

Part Name (::part)	HTML Target	Description & Usage
::section-main-content	<main>	The primary scrollable document canvas wrapper.
::section-overview	<div>	Top introductory overview section containing API metadata, description, and contact info.
::section-overview-title	<div>	The main API title heading inside the overview section.
::anchor-overview	<a>	Contact email, license, and terms of service links in the overview.

Servers & Environments

Parts for server environment controls, selection, and URL variable templates.

Part Name (::part)	HTML Target	Description & Usage
::section-servers	<div>	Container for server selection and environment controls.
::section-servers-title	<div>	Title heading for the API Servers section.
::label-selected-server	<div>	Label displaying the currently selected base server URL.
::textbox-server-var	<input>	Input fields for server URL template variables.

Authentication & Security

Parts for authentication credentials, OAuth2 scopes, and security modals.

Part Name (::part)	HTML Target	Description & Usage
::section-auth	<div>	Container for authentication credentials and security scheme panels.
::section-auth-scopes	<div>	Wrapper for OAuth2 authorization scope options.
::checkbox-auth-scope	<input type='checkbox'>	Checkbox for selecting individual OAuth2 permission scopes.
::textbox-auth-client-id	<input>	Input field for the OAuth2 client ID.
::textbox-auth-client-secret	<input>	Input field for the OAuth2 client secret.
::textbox-username	<input>	Username input field for HTTP Basic or password authentication.
::textbox-password	<input>	Password input field for HTTP Basic or password authentication.

Operations & Endpoints

Parts for endpoint headers, method badges, paths, summaries, and dividers.

Part Name (::part)	HTML Target	Description & Usage
::section-tag	<section>	Tag group container grouping multiple related operations.
::section-tag-title	<div>	Header title displayed for an OpenAPI tag.
::label-tag-title	<div>	Text label for the tag title.
::section-operations-in-tag	<section>	Container wrapping all operations belonging to a tag.
::section-operation	<article>	Single endpoint operation container.
::section-operation-tag	<div>	Tag badge/indicator rendered within the operation header.
::section-req-resp-container	<div>	Container holding both the request configuration and response viewing panels.
::section-request-panel	<div>	Panel containing request parameters, headers, and payload inputs.
::section-operation-summary	<h2>	Summary heading for the operation.
::label-operation-method	<span>	HTTP method label badge (e.g., GET, POST, PUT, DELETE).
::label-operation-path	<span>	Endpoint URI route path.
::endpoint-badge	<span>	Status badge on endpoint (e.g., deprecated, webhook).
::operation-divider	<div>	Horizontal divider separating operations in read mode.
::section-endpoint-head-expanded	<div>	Header row of an expanded endpoint in view or focused mode.
::section-endpoint-head-collapsed	<div>	Header row of a collapsed endpoint in view mode.
::section-endpoint-head-method	<div>	HTTP method badge in the endpoint header row.
::section-endpoint-head-path	<div>	Path text in the endpoint header row.
::section-endpoint-head-description	<div>	Short summary description in the endpoint header row.
::section-endpoint-body-expanded	<div>	Full body container of an expanded endpoint.
::section-endpoint-body-collapsed	<div>	Body container when an endpoint is collapsed.
::section-endpoint-body-title	<div>	Summary title inside the expanded endpoint body.
::section-endpoint-body-description	<div>	Full markdown description inside the expanded endpoint body.

Interactive Console & Buttons

Parts for the Try console, buttons, response panels, and action triggers.

Part Name (::part)	HTML Target	Description & Usage
::wrap-request-btn	<div>	Container wrapping the Try, Clear, and Execute action buttons.
::btn	<button>	Base part applied to all buttons across RapiDoc.
::btn-try	<button>	The primary 'TRY' execution button.
::btn-fill	<button>	Solid filled buttons (e.g., primary actions, search, copy).
::btn-outline	<button>	Outlined secondary buttons.
::btn-clear	<button>	Button to clear request parameter fields.
::btn-clear-response	<button>	Button to clear returned response data.
::btn-copy	<button>	Copy-to-clipboard button on code blocks and responses.
::btn-search	<button>	Search submit button in filter dialogues and headers.
::btn-response-status	<button>	HTTP response status code selector buttons (e.g., 200, 400, 404).
::btn-selected-response-status	<button>	The currently active HTTP response status button.

Tabs & Code Panels

Parts for switching between Request/Response tabs, Example/Schema, and languages.

Part Name (::part)	HTML Target	Description & Usage
::tab-panel	<div>	Container panel wrapping tab controls and content.
::tab-btn-row	<div>	Row of tab selector buttons.
::tab-btn	<button>	Individual tab button.
::tab-content	<div>	Body container of the active tab.

Inputs & Form Fields

Parts for parameter inputs, textareas, file pickers, and checkboxes.

Part Name (::part)	HTML Target	Description & Usage
::textbox	<input>	Standard text input field.
::textbox-param	<input>	Input field for query, path, and header parameters.
::textarea	<textarea>	Standard multi-line text input field.
::textarea-param	<textarea>	Multi-line text input for request bodies and payload parameters.
::file-input	<input type='file'>	File upload input element for multipart forms.
::checkbox	<input type='checkbox'>	Standard checkbox input.
::anchor	<a>	General links throughout the documentation.
::anchor-param-example	<a>	Link to populate an example value into parameter inputs.
::anchor-param-constraint	<a>	Link displaying schema constraints (minimum, maximum, pattern, enum).

Schema & Data Types

Parts for schema descriptions, tree toolbars, and badges.

Part Name (::part)	HTML Target	Description & Usage
::schema-description	<span>	Markdown description text inside schema definitions.
::schema-toolbar-item	<div>	Controls on schema cards (expand, collapse, view options).
::schema-multiline-toggle	<div>	Toggle button to expand or collapse multi-line descriptions.

---

3. CSS Custom Properties (Design Tokens)

In addition to Shadow Parts, RapiDoc exposes a comprehensive set of CSS variables on :host. You can override these variables on <rapi-doc> or any ancestor container in your stylesheet or inline styles:

rapi-doc {
  /* Override surface tokens */
  --background: #0b1121;
  --foreground: #f8fafc;
  --card: #0f172a;
  --border: #1e293b;

  /* Override typography tokens */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Override radius token */
  --radius: 8px;
}

Below is the complete catalog of CSS custom properties exposed by RapiDoc:

Layout & Geometry

Structural sizing, corner radiuses, scrollbars, and modal behavior.

CSS Custom Property	Default / Calculated Value	Description
--radius	0.25rem (responsive to radius attribute)	Global component corner radius derived from radius attribute (none, sm, md, lg, full).
--card-radius	4px (default) / 6px (md) / 8px (lg, full)	Compact corner radius for dialog boxes, code blocks, tables, and parameter sections.
--border-radius	var(--radius)	Legacy alias for corner radius.
--ui-base-size	14px (default) / 13px (sm) / 16px (lg)	Base UI scaling unit governing element dimensions across the application.
--nav-width	18.75rem (default) / 17rem (sm) / 21rem (lg)	Width of the sidebar navigation panel, automatically responsive to the scale attribute.
--nav-item-padding	0.4375rem 1rem 0.4375rem 0.625rem	Padding around navigation items in the sidebar (responsive to nav-item-spacing="compact" | "default" | "relaxed").
--nav-logo-max-height	60px	Maximum height constraint for images rendered inside the nav-logo slot.
--layout	column (read/focused) / row (view)	Flex direction layout of documentation columns (row or column).
--scroll-bar-width	8px	Width and height of custom scrollbars.
--resp-area-height	400px / auto	Height of the response console preview area.
--focus-shadow	0 0 0 1px transparent, 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent)	Outline shadow applied to active interactive elements on keyboard focus.
--table-schema-key-width	240px	Minimum column width for property keys in schema tables.

Typography & Scaling

Font families and font size scaling presets.

CSS Custom Property	Default / Calculated Value	Description
--font-sans	Open Sans, Segoe UI, Tahoma, sans-serif	Primary sans-serif font family token (shadcn/ui compatible).
--font-regular	var(--font-sans, "Open Sans", ...)	Primary font family for body text, headings, and navigation.
--font-mono	Monaco, "Andale Mono", "Roboto Mono", Consolas, monospace	Monospace font family for code snippets, HTTP methods, paths, and schema models.
--font-size-small	12px (default) / 11px (sm) / 14px (lg)	Small font size for parameter tables, badges, and metadata labels.
--font-size-mono	13px (default) / 12px (sm) / 15px (lg)	Base font size for monospace code blocks and syntax highlighters.
--font-size-regular	14px (default) / 13px (sm) / 16px (lg)	Primary body font size for paragraphs and descriptions.

Surface & Semantic Colors

Modern semantic design tokens for canvas, cards, text, and muted surfaces.

CSS Custom Property	Default / Calculated Value	Description
--background	theme dependent (#09090b / #ffffff)	Primary canvas and main container background color.
--foreground	theme dependent (#fafafa / #09090b)	Primary foreground body text color.
--card	theme dependent (#18181b / #f4f4f5)	Surface background color for cards, request/response panels, and dialogs.
--card-foreground	theme dependent (#fafafa / #09090b)	Foreground text color inside cards, request panels, and dialogs.
--muted	theme dependent (#27272a / #f4f4f5)	Muted surface background for inactive tabs, hovered rows, and code blocks.
--muted-foreground	theme dependent (#a1a1aa / #71717a)	Secondary muted text color for subtitles, parameter hints, and metadata.
--nav-hover-bg	oklch(from var(--background) calc(l - 0.04) c h)	Dynamically calculated hover surface background for sidebar navigation items and sections.
--nav-hover-fg	var(--foreground)	Text color of sidebar navigation items and sections on hover.
--nav-accent-fg	var(--primary)	Text color of selected/active sidebar navigation items in default left-bar mode.
--selection-bg	color-mix(in srgb, var(--primary) 25%, transparent)	Highlight background color for user-selected text.
--selection-fg	var(--foreground)	Text color inside user selections.

Borders & Sizing Tokens

Dividers, line separators, inputs, and border radius tokens.

CSS Custom Property	Default / Calculated Value	Description
--border	theme dependent (#27272a / #e4e4e7)	Standard border color for dividers, tables, and cards.
--input-background	theme dependent (lighter than background in dark, darker in light)	Background color for text and file inputs, textareas, and code blocks.
--input-border	theme dependent (between border and background)	Border color for text and file inputs, textareas, and code blocks.
--input	var(--input-background)	Alias for --input-background.
--radius	0.25rem (responsive to radius attribute)	Border radius token for cards, inputs, buttons, and badges.

Brand & Accent Colors

Primary brand highlights, button fills, focus rings, and method indicators.

CSS Custom Property	Default / Calculated Value	Description
--primary	preset dependent (#f59e0b amber, #3b82f6 default)	Primary accent color for interactive actions, active navigation items, and buttons.
--primary-foreground	preset dependent (#000000 / #ffffff)	High-contrast text color when placed on top of --primary.
--ring	preset dependent (matches --primary)	Focus ring outline color on interactive elements.
--method-get	#3b82f6 (dark) / #2563eb (light)	HTTP GET method badge color in navigation and endpoint headers.
--method-post	#10b981 (dark) / #059669 (light)	HTTP POST method badge color in navigation and endpoint headers.
--method-put	#f59e0b (dark) / #d97706 (light)	HTTP PUT method badge color in navigation and endpoint headers.
--method-delete	#ef4444 (dark) / #dc2626 (light)	HTTP DELETE method badge color in navigation and endpoint headers.
--method-patch	#8b5cf6 (dark) / #7c3aed (light)	HTTP PATCH method badge color in navigation and endpoint headers.
--method-head	#eab308 (dark) / #b45309 (light)	HTTP HEAD method badge color in navigation and endpoint headers.
--method-options	#06b6d4 (dark) / #0891b2 (light)	HTTP OPTIONS method badge color in navigation and endpoint headers.
--method-trace	#ec4899 (dark) / #db2777 (light)	HTTP TRACE method badge color in navigation and endpoint headers.
--method-query	#6366f1 (dark) / #4f46e5 (light)	HTTP QUERY method badge color in navigation and endpoint headers.
--method-default	#64748b (dark) / #475569 (light)	Fallback HTTP method badge color for custom methods in additionalOperations.
--blue	#3b82f6 (dark) / #2563eb (light)	General informational blue accent token.
--green	#10b981 (dark) / #059669 (light)	General success green accent token.
--orange	#f59e0b (dark) / #d97706 (light)	General warning orange accent token.
--red	#ef4444 (dark) / #dc2626 (light)	General destructive/danger red accent token.
--purple	#8b5cf6 (dark) / #7c3aed (light)	General secondary accent purple token.
--yellow	#eab308 (dark) / #b45309 (light)	General caution yellow accent token.
--pink	#ec4899 (dark) / #db2777 (light)	General highlight pink accent token.
--brown	#d97706 (dark) / #92400e (light)	General earthy accent brown token.

Code & Syntax Highlighting

Code blocks, inline tags, and syntax tokens.

CSS Custom Property	Default / Calculated Value	Description
--code-bg	theme dependent	Background color for multi-line code sample panels.
--code-fg	theme dependent	Default text color inside code blocks.
--markdown-fg	#c4c6d1 (dark) / #475569 (light)	Text color for markdown descriptions, paragraphs, and list items.
--inline-code-fg	#c4c6d1 (dark) / #334155 (light)	Text color for inline `code` tags within descriptions.
--inline-code-bg	#3b3c45 (dark) / #e2e8f0 (light)	Background pill color for inline `code` tags within descriptions.
--code-property-color	theme dependent	Syntax color for JSON/YAML object keys and properties.
--code-keyword-color	theme dependent	Syntax color for language keywords (import, function, if).
--code-operator-color	theme dependent	Syntax color for syntax operators and punctuation.
--syntax-comment	theme dependent	Token color for code comments.
--syntax-keyword	theme dependent	Token color for syntax keywords.
--syntax-operator	theme dependent	Token color for language operators.
--syntax-string	theme dependent	Token color for string literals.
--syntax-constant	theme dependent	Token color for numeric constants and booleans.
--syntax-function	theme dependent	Token color for function and method identifiers.
--syntax-type	theme dependent	Token color for data type identifiers.
--syntax-variable	theme dependent	Token color for variable names.
--syntax-property	theme dependent	Token color for object property keys.

---

4. Production Styling Recipes

Recipe 1: Frosted Glass Sidebar with Neon Accents

/* Frosted glass backdrop blur on sidebar */
rapi-doc::part(section-navbar) {
  background: rgba(10, 15, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sidebar header area (wrapping logo & search) */
rapi-doc::part(section-navbar-header) {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Real-time search filter input inside sidebar */
rapi-doc::part(textbox-nav-filter) {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius);
  color: #f8fafc;
  padding: 8px 12px;
}

rapi-doc::part(textbox-nav-filter):focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

Recipe 2: Gradient Action Buttons & “TRY” Triggers

/* Base button enhancements */
rapi-doc::part(btn) {
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Primary filled buttons (TRY execution, copy, search) */
rapi-doc::part(btn-fill) {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

rapi-doc::part(btn-fill):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);
}

Recipe 3: Custom Server Environment Panel

/* Server selector container */
rapi-doc::part(section-servers) {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--card-radius);
  padding: 16px 20px;
}

/* Selected base URL indicator */
rapi-doc::part(label-selected-server) {
  color: #38bdf8;
  font-family: var(--font-mono);
  font-weight: 600;
}

Recommended Architecture

The recommended workflow is setting foundational colors and typography using declarative HTML attributes (theme, color-scheme, radius, scale), and reserving ::part() for high-impact visual customizations such as gradients, backdrop filters, and custom container borders.