atomic-result-template

This is for:

Developer
In this article

A result template determines the format of the query results, depending on the conditions that are defined for each template.

Properties

Property Attribute Description Type Default

conditions

A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.

For example, the following targets a template and sets a condition to make it apply only to results whose title contains singapore: document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];

ResultTemplateCondition[]

[]

mustMatch

must-match

The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose filetype is lithiummessage or YouTubePlaylist: must-match-filetype="lithiummessage,YouTubePlaylist"

Record<string, string[]>

{}

mustNotMatch

must-not-match

The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose filetype is not lithiummessage: `must-not-match-filetype="lithiummessage"

Record<string, string[]>

{}

Slots

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

Slot Description

default

Mandatory. A template element that defines the structure of the result item.

link

A template element that contains a single atomic-result-link component.

Note: Any <script> tags that are defined inside a <template> element will not be executed when the results are being rendered.

Methods

getTemplate

Gets the appropriate result template based on conditions applied.

Signature: getTemplate() => Promise<ResultTemplate<DocumentFragment> | null>

Returns: Promise<ResultTemplate<DocumentFragment> | null>