Concorde functional component — Translation. sonic-t renders a translated label in plain HTML. It is the markup counterpart of the t() directive and shares its endpoint, batching and cache. Doc ID: core/components/functional/translation/translation. Keywords: Concorde, supersoniks, core/components/functional/translation/translation, translation, Translation, functional component, sonic-translation, web component, sonic-t, serviceURL, wordingProvider, key, unsafeHTML, , wordingVersionProvider. URL: https://concorde.supersoniks.org/core/components/functional/translation.

Translation

sonic-t renders a translated label in plain HTML. It is the markup counterpart of the t() directive and shares its endpoint, batching and cache.

Basic example

Set serviceURL and wordingProvider on an ancestor, then give each sonic-t a key. Labels requested together are fetched in one call.

<div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
      <p><sonic-t key="flight.boarding"></sonic-t></p>
    </div>

HTML labels

The label is escaped by default. Add unsafeHTML for labels that contain trusted markup.

<div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
      <p><sonic-t key="flight.gate" unsafeHTML></sonic-t></p>
    </div>

Endpoint format, reloading on <html lang> change and wordingVersionProvider are described on the t() page.

API reference

No slots.