atomic-smart-snippet-suggestions

This is for:

Developer
In this article

The atomic-smart-snippet-suggestions-suggestions component displays an accordion of questions related to the query with their corresponding answers.

You can style the snippets by inserting a template element like this:

<atomic-smart-snippet-suggestions>
  <template>
    <style>
      b {
        color: blue;
      }
    </style>
  </template>
</atomic-smart-snippet-suggestions>

Properties

Property Attribute Description Type Default

headingLevel

heading-level

The heading level to use for the "People also ask" heading over the snippets, from 1 to 5.

number

0

snippetStyle

snippet-style

Sets the style of the snippets.

Example:

smartSnippet.snippetStyle = `
  b {
    color: blue;
  }
`;

string | undefined

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

source-anchor-attributes

Lets you pass attributes down to anchor elements, overriding other attributes. To be used exclusively in anchor elements, such as: <a slot="source-anchor-attributes" target="_blank"></a>.

Shadow Parts

Part Description

answer

The container displaying the full document excerpt of a related question’s answer.

answer-and-source

The wrapper around the answer and source of a related question.

container

The wrapper with a border around the entire component.

footer

The wrapper around the source of a related question’s answer.

heading

The heading above the list of related questions.

question-answer-collapsed

A collapsed related question.

question-answer-expanded

An expanded related question.

question-button-collapsed

The button to expand a related question.

question-button-expanded

The button to collapse a related question.

question-icon-collapsed

The caret of a collapsed related question.

question-icon-expanded

The caret of an expanded related question.

question-text-collapsed

The title of a collapsed related question.

question-text-expanded

The title of an expanded related question.

questions

The list of related questions.

source-title

The title of the document a related question’s answer is extracted from.

source-url

The URL to the document a related question’s answer is extracted from.