This is for:


The atomic-query-summary component displays information about the current range of results and the request duration (for example, "Results 1-10 of 123 in 0.47 seconds").


This component provides feedback about the size of results in a query submission, helping the user maintain the context of the search, helping to make more informed query reformulations. Enabling an optional duration property to display the duration of query execution can be helpful when benchmarking and optimizing a search page.

User Experience and Best Practices

Usage Notes

  • The Query Summary provides feedback to the user about their query submission, helping make informed decisions about reformulating their query.

  • The query summary is usually displayed on the left side of a search page, below the search box, and above the results.

  • Displaying duration doesn’t offer much value to a user, but can be a useful tool for developers and site admins.

Shadow Parts

Part Description


The container for the whole summary.


The container for the duration.


The summary highlights.


The query summary placeholder used while the search interface is initializing.


The summary highlighted query.


The container for the results.