Shadow Dom: Das bessere iFrame

Posted on by Julian Stock.

Vor einiger Zeit wollte ich Inhalte eines externen Services auf einer Website einbinden. Standardmäßig habe ich, wie so viele andere vermutlich auch, auf das uralte HTML-Element iFrame zurückgegriffen. Doch das hat verschiedene Nachteile:

  • Keine Manipulation des Doms möglich (d. h. zum Beispiel kein Tracking möglich)
  • Man benötigt ein resize-Script, damit das iFrame an die Höhe des Inhalts angepasst wird
  • Styling der externen Ressourcen ebenfalls nicht möglich

Natürlich kann man die Inhalte mittels JavaScript vom externen Anbieter scrapen und auf der eigenen Seite mit einem div-Container einbinden, doch das hat den Nachteil, dass die dort verwendeten Stylesheet-Angaben die eigene Website "zerstören" (Stichwort: View Encapsulation).

Wenn ich die Inhalte allerdings über JavaScript hole (jQuery: $.get/$.post/$.ajax), kann ich mir in einem div-Container meiner Wahl & Shadow Dom die Inhalte inkl. Manipulation jedweder Art anzeigen lassen. Komplett dynamisch, ohne Probleme und super modern. Und die Stylesheets behalten alle ihren Scope. Toll!

Shadow Dom: Das bessere iFrame

Unterstützung zum jetzigen Zeitpunkt: Chrome, Safari, Firefox ✅
Internet Explorer 11/Edge ❌ (nur über Polyfills) wie immer :D

In meinem Beispiel habe ich noch die Verarbeitung der Daten in einem Formular benötigt, d. h. Daten mussten per POST gesendet werden.

$.ajax({
    url: "myPhpFile.php",
    type: "post",
    dataType: "html",
    data: postData,
    success: function(data) {
        var $hiddenContainer = $("<div />").html(data);
        // entferne sämtliche, nicht benötigten Ressourcen aus der Antwort
        $hiddenContainer.children("meta,title,style,script,comment").remove();

        var shadow = container.attachShadow({mode: "open"});
        var html = document.createElement("div");
        html.innerHTML = $hiddenContainer.html();
        shadow.appendChild(html);
    },
});

Natürlich hat die Sache auch einen entscheidenden Nachteil: Ohne JavaScript ist man wieder einmal aufgeschmissen. Doch dann könnte man immer noch den Fallback des iFrames verwenden - falls unbedingt erforderlich. In der heutigen Zeit, in der immer mehr Inhalte über Angular oder andere Webapps realisiert werden, ist JavaScript sowieso nicht mehr wegzudenken.

Wann immer möglich, werde ich in Zukunft also auf den Shadow Dom zurückgreifen. Falls ihr andere Erfahrungen gemacht oder Tipps für mich habt, meldet euch gerne 😊👍

Weitere Informationen: https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow


Julian Stock
Webentwickler aus Lübeck · 35 Jahre

Social