Styling

A theme styles Search Web Components with plain CSS. The components render into the light DOM, and Search Web Components ships no CSS of its own.

Classes and ARIA attributes

Each component's page in Storybook lists, in its Controls table, the classes the component renders and the roles and ARIA attributes it sets, each with where and when. A theme selects on either, e.g., search-root.search-error or [aria-current="page"]. Both lists come from custom-elements.json, as cssClasses and ariaAttributes on each element. A change to a listed class or ARIA attribute gets a changelog entry.

Inline styles

The components set a few inline styles. A stylesheet rule overrides one only with !important.

• display: block on every element, except the two below.
• search-no-results-message: display: none while the search has results and before the first response. The inline display is removed while the search has no results.
• search-loading-indicator: display: block while its children show, and display: none otherwise.
• search-dialog-pane: the open dialog without modal gets z-index: 1 when its computed z-index is auto, so it is drawn above the results that follow it. The inline value is removed when the dialog closes. While open, the dialog is a stacking context at level 1, so a popup inside it is drawn above the page only up to that level. Set a z-index on search-dialog-pane > dialog, in a plain rule or a cascade layer, to place the dialog another way. The pane then sets no inline z-index.
• The status regions, .search-root-announcement and .search-dialog-pane-announcement, are visually hidden with inline styles.
• search-result-element-default: overflow-x: scroll on its details.

See it styled

The two-column search page in Storybook has example styles. Turn off its exampleStyles control, or open the same page without the example styles, to see the components with no CSS.