Search Web Components

Appearance

Styling ​

A theme styles Search Web Components with plain CSS. The components render into the light DOM, and Search Web Components ships no CSS except the range facet's slider rules, in a cascade layer.

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 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.

The cascade layer ​

facet-range adds a stylesheet to the document, in the cascade layer search-web-components, so the slider works on a page with no CSS of its own. The rules lay out the From and To inputs, draw the slider's track and thumbs, and size the histogram's bars. They use the text color and em units, so the facet takes the page's color and font size.

A normal stylesheet overrides the layer's rules, whatever their specificity, so recolor or resize any part of the slider with ordinary selectors. A theme that puts its own rules in layers should list search-web-components before its own, e.g., @layer search-web-components, theme;, so the theme's layers win.

To start from the browser's defaults instead, revert the layer with one normal rule, then style the parts with class selectors, which win over it:

css
facet-range * {
  all: revert;
}

The two thumbs then sit on separate tracks until the theme puts them back on one. The rules that do that are in lit/src/facet-range/SliderTrackLayer.ts.

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.