mit shadow-dom realisieren

mit folgendem pattern kann man ein custom element realisieren, welches beliebiges html schützt vor externen styles:

<template id="meineIdAmBestenGeneriert">
  <!-- HIER Kommt beliebiges HTML,CSS,SCRIPTS -->
</template>
<script>
(function() {
  window.customElements.define("css-sandbox", class extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      const template = document.querySelector(this.getAttribute("template"));
      const shadowRoot = this.attachShadow({mode: "open"});

      const temp = document.importNode(template.content, true);
      shadowRoot.appendChild(temp);
    }
  });
})();
</script>
<css-sandbox template="#meineIdAmBestenGeneriert"></css-sandbox>

FriendsOfREDAXO / minibar

mit shadow-dom realisieren #21