Missing styles for Spectrum Web Compontents

InDesign
, ,
1

Hello everyone,

when I generate Spectrum Web Components via script, they sometimes lose their styling.

I insert the elements using a template element, which is probably causing this issue.

<sp-theme theme="spectrum" color="light" scale="medium" dir="ltr">
			<main>
				<sp-button id="refesh-button">Refesh</sp-button>
				<div id="refesh-area">
					<!-- generated elements -->
				</div>
				<template id="input-item-template">
					<div class="input-item">
						<sp-field-label class="input-label">Label</sp-field-label>
						<sp-textfield></sp-textfield>
					</div>
				</template>
			</main>
		</sp-theme>

const inputItemTemplateElem = document.getElementById("input-item-template");
	
	for(let i=0; i<20; i++) {
		const inputItemFrag = inputItemTemplateElem.content.cloneNode(true);
		if(!inputItemFrag || !(inputItemFrag instanceof DocumentFragment)) {
			console.error("Error when cloning the template.");
			return;
		}
		const inputLabelElem = inputItemFrag.querySelector(".input-label");
		inputLabelElem.textContent = "Label " + ++labelIndex;
		refeshAreaElem.appendChild(inputItemFrag);
	}

I haven’t noticed it yet when I insert the elements one by one.

for(let i=0; i<20; i++) {
		const inputItem = document.createElement("div");
		const inputLabelItem = document.createElement("sp-field-label");
		inputLabelItem.textContent = "Label " + ++labelIndex;
		const inputElem = document.createElement("sp-textfield");
		inputItem.appendChild(inputLabelItem);
		inputItem.appendChild(inputElem);
		refeshAreaElem.appendChild(inputItem);
	}

Does anyone know a workaround for this issue using the template element?

Roland

swc_styles_test.ccx (100.5 KB)