Allow slots on <sdpi-i18n>

[Durss]

<sdpi-i18n> is nice but lacks sloting capabilities.
Supposing we want a link in the middle of a label, right now we have to split the label in 2 parts and do something like:

<sdpi-i18n key="key1" />
<a href="https://elgato.com">Elgato</a>
<sdpi-i18n key="key2" />

This makes localization quite uneasy.

It would be much better being able to declare a label this way:

Go visit {LINK} please !

Then handling it this way :

<sdpi-i18n key="key1">
	<slot name="link"><a href="https://elgato.com">Elgato</a></slot>
</sdpi-i18n>

Which would output:

Go visit <a href="https://elgato.com">Elgato</a> please !

This way the label remains the source of truth and can chose to display a slot or not by adding the placeholder or not.

If that can be of any help, I made an override in my project to handle this logic:

import { html } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

customElements.whenDefined('sdpi-i18n').then(() => {
	const originalElement = customElements.get('sdpi-i18n');
	if (originalElement) {
		// Override render function
		originalElement.prototype.render = function () {
			const message = SDPIComponents?.i18n?.getMessage?.(this.key) || this.key;

			if (!this.key) return undefined;

			// Get all slot elements
			const slots = this.querySelectorAll('slot');
			if (slots.length === 0)  return html`${message}`;

			// Replace placeholders with slot contents
			let result = message;
			slots.forEach(el => {
				const slotName = el.getAttribute('name');
				const placeholder = `\{${slotName}\}`;
				result = result.replace(new RegExp(placeholder, 'gi'), el.outerHTML);
			});

			return html`<span .innerHTML=${result}></span>`;
		};

		// Force re-render of existing elements
		document.querySelectorAll('sdpi-i18n').forEach(el => el.requestUpdate());
	}
});