Overlay (experimental)

The experimental Overlay component uses fluent.js DOM Overlays to render translation messages that contain HTML markup.

DOM overlays provide a safe mechanism for translators to use text-level markup. They also allow developers to provide functional elements that can be used in translations.

Please check the fluent.js documentation for DOM Overlays if you want to learn more.

Due to the way DOM Overlays are currently implemented in svelte-fluent there are some additional limitations to the limitations listed in the @fluent/dom wiki:

• Updates to <Overlay/> component props and children cause a high overhead and should be minimized
• Svelte actions (<tag use:someaction/>) won’t work correctly for children of the <Overlay/> component
• Svelte transitions/animations (<tag transition:fade />) won’t work correctly for children of the <Overlay/> component
• Svelte bindings (<tag bind:clientWidth={something} />) won’t work correctly for children of the <Overlay/> component
• Event handlers (<tag onclick={handleClick} />) bound on children of the <Overlay/> component will not fire

Snippets

Static text example

<script>
	import { Overlay } from '@nubolab-ffwd/svelte-fluent';
</script>

<Overlay id="info">
	<a data-l10n-name="link" href="https://example.com/">
		<!-- text from FTL file gets inserted here -->
	</a>
</Overlay>

info = Read the <a data-l10n-name="link">documentation</a> for more information.

Dynamic text with variables example

<script>
	import { Overlay } from '@nubolab-ffwd/svelte-fluent';
	let { productName = 'Example Product' } = $props();
</script>

<Overlay id="info" args={{ productName }}>
	<a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">
		<!-- text from FTL file gets inserted here -->
	</a>
</Overlay>

info =
  You can download "{ $productName }" by clicking
  on the <strong>Download</strong> button or read
  the <a data-l10n-name='release-notes'>release notes</a> to learn more.

Props