API Viewer Element API Viewer Element Toggle darkmode

API: Styling

Custom CSS properties

The following custom CSS properties are available:

--ave-accent-colorAccent color, used for property / method names
--ave-border-colorColor used for borders and dividers
--ave-border-radiusBorder radius used for the outer border
--ave-button-active-backgroundColor of the :focus and :hover button
--ave-button-backgroundBackground of the button (code snippet, events)
--ave-button-colorColor of the button (code snippet, events)
--ave-header-backgroundBackground of the header used for tag name
--ave-header-colorHeader text color used for tag name
--ave-item-colorAPI items content color (main text)
--ave-label-colorAPI items labels color
--ave-link-colorAPI description links default color
--ave-link-hover-colorAPI description links hover color
--ave-monospace-fontMonospace font stack for the API items
--ave-primary-colorPrimary color, used for header and active tab
--ave-secondary-colorColor used for method types in API docs
--ave-tab-colorInactive tabs color
--ave-tab-selected-colorSelected tab color
--ave-tab-indicator-sizeSize of the selected tab indicator

CSS shadow parts

The following CSS shadow parts are available:

Common UI parts

headerHeader containing element name and navigation controls
header-titleTitle element placed in the header (element tag name)
tab<api-viewer-tab> component used in docs and demo
tab-panel<api-viewer-panel> component used in docs and demo
warningMessage shown when no elements or API docs are found

API docs

docs-descriptionCustom element description placed under the header
docs-containerThe wrapper element placed under the description
docs-columnColumn, child of a docs-row part
docs-itemItem representing a single entry (property, event etc)
docs-labelLabel (name, attribute, type, description)
docs-markdownItem description with parsed markdown content
docs-methodMethod name with its params and return type
docs-method-paramsComma-separated list of method params their types
docs-method-typeReturn type of a method, or "void" if not specified
docs-param-nameName of a method parameter
docs-param-typeType of a method parameter
docs-rowRow containing columns. Child of a docs-item part
docs-valueSibling of a docs-label part (name, attribute, type)
docs-valueSibling of a docs-label part (name, attribute, type)
md-h1Markdown <h1> elements
md-h2Markdown <h2> elements
md-h3Markdown <h3> elements
md-h4Markdown <h4> elements
md-h5Markdown <h5> elements
md-h6Markdown <h6> elements
md-aMarkdown <a> elements
md-pMarkdown <p> elements
md-ulMarkdown <ul> elements
md-olMarkdown <ol> elements
md-liMarkdown <li> elements
md-preMarkdown <pre> elements
md-codeMarkdown <code> elements
md-strongMarkdown <strong> elements
md-emMarkdown <em> elements
md-blockquoteMarkdown <blockquote> elements
md-delMarkdown <del> elements

Live demo

demo-containerThe wrapper element placed under the header
demo-outputWrapper of the rendered component in the live demo
demo-snippetWrapper of the code snippet in the live demo
demo-tabsTabs component used to switch panels in the live demo
event-logWrapper of the event log tab content
event-record<p> used as a record in the event log
knobsWrapper of in the properties / styles knobs panel
knobs-columnColumn in the properties / styles knobs panel
knobs-headerHeader of the properties / styles knobs column
knob-labelLabel associated with an input in the knobs panel

Interactive elements

button<button> used to copy code / clear events log
checkbox<input type="checkbox"> used by boolean knobs
input<input type="text"> used by knobs
radio-button<input type="radio"> used to toggle docs / demo
radio-label<label> associated with the radio button element
select<select> used to choose displayed component
select-label<label> associated with the select element

Read more about using ::part() at MDN Web Docs.