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);
  }
}
Next Question (19/20)