Web Components & Shadow DOM
How do you handle dynamic template content in Web Components?
class DynamicComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
render(data) {
const template = document.getElementById('template');
const clone = template.content.cloneNode(true);
clone.querySelector('.content').textContent = data;
this.shadowRoot.replaceChildren(clone);
}
}