HTML template elements are not localized

[tdulcet]

HTML template elements are not localized as expected:

<template>
	<span data-i18n="__MSG_example__">Please translate me!</span>
</template>

The issue is that they are not found by document.querySelectorAll:

Localizer/Localizer.js

Lines 283 to 286 in f6da4ca

	document.querySelectorAll(`[${I18N_ATTRIBUTE}]`).forEach((currentElem) => {
	const contentString = currentElem.dataset[I18N_DATASET];
	replaceI18n(currentElem, contentString);
	});

This affects my Thunderbird Send add-on, which uses an HTML template element in the popup. See tdulcet/Thunderbird-Send#14.

CC: @DenB10

[rugk]

Hmm interesting, it seems this is a feature of the template tag. Does it work if you set shadowrootmode to open?

[tdulcet]

Does it work if you set shadowrootmode to open?

No, setting it "open" breaks the template element and produces an exception: TypeError: can't access property "content", template is null. The solution might be to iterate over any template elements separately and then perform the query on each one.