Shadow-DOM-Kapselungsschutz für benutzerdefinierte Elemente

export class EncapsulatedWidget extends HTMLElement {
  #root = this.attachShadow({ mode: 'closed' });
 
  connectedCallback() {
    Object.freeze(this.#root);
    const container = document.createElement('div');
    container.setAttribute('data-secure', 'true');
    container.textContent = 'Isolated Boundary';
    this.#root.appendChild(container);
  }
}
 
if (!customElements.get('x-secure-widget')) {
  customElements.define('x-secure-widget', EncapsulatedWidget);
}