Ich habe von Shadow DOM gehört, das das Problem der Kapselung bei der Entwicklung von Web-Widgets zu lösen scheint. DOM- und CSS-Regeln werden gekapselt, was gut für die Wartung ist. Aber ist das nicht das, wofür Iframes da sind? Welche Probleme gibt es mit iFrames, die es erforderlich machten, dass das W3C Shadow DOM oder HTML5-Webkomponenten entwickelte?
Warum Shadow DOM, wenn wir Iframes haben?
Lesezeit: 3 Minuten
12049100cookie-checkWarum Shadow DOM, wenn wir Iframes haben?
Cory-Haus
Heutzutage werden iFrames häufig verwendet, um einen separaten Umfang und ein separates Design sicherzustellen. Beispiele sind Googles Karte und YouTube-Videos.
Iframes sind jedoch so konzipiert, dass sie andere einbetten vollständiges Dokument innerhalb des aktuellen HTML-Dokuments. Das bedeutet, dass der Zugriff auf Werte in einem bestimmten DOM-Element in einem Iframe aus dem übergeordneten Dokument konstruktionsbedingt mühsam ist. Die DOM-Elemente befinden sich in einem völlig separaten Kontext, sodass Sie das DOM des Iframes durchlaufen müssen, um auf die gesuchten Werte zuzugreifen. Vergleichen Sie dies mit Webkomponenten, die eine elegante Möglichkeit bieten, eine saubere API für den Zugriff auf die Werte benutzerdefinierter Elemente bereitzustellen.
Stellen Sie sich vor, Sie erstellen eine Seite mit einem Satz von 5 Iframes, die jeweils eine Komponente enthalten. Jede Komponente würde eine separate URL benötigen, um den Inhalt des Iframes zu hosten. Das resultierende Markup wäre mit Iframe-Tags übersät, was ein Markup mit geringer semantischer Bedeutung ergibt, das auch umständlich zu lesen und zu verwalten ist. Im Gegensatz dazu unterstützen Webkomponenten das Deklarieren von reichhaltigen semantischen Tags für jede Komponente. Diese Tags fungieren als erstklassige Bürger in HTML. Dies hilft dem Leser (mit anderen Worten, dem Wartungsentwickler).
Zusammenfassend lässt sich sagen, dass sowohl Iframes als auch das Shadow-DOM Kapselung bieten, aber nur das Shadow-DOM für die Verwendung mit Webkomponenten entwickelt wurde und somit die übermäßige Trennung, den Einrichtungsaufwand und das klobige Markup vermeidet, das bei Iframes auftritt.
Dori Zidon
iframes werden nur als Kapselungsobjekte verwendet …
Mit Ausnahme von SVG (dazu später mehr) bietet die heutige Webplattform nur einen eingebauten Mechanismus, um einen Codeblock von einem anderen zu isolieren – und das ist nicht schön. Ja, ich rede von Iframes. Für die meisten Kapselungsanforderungen sind Frames zu schwer und restriktiv.
Mit Shadow DOM können Sie eine bessere und einfachere Kapselung bereitstellen, indem Sie einen weiteren Klon des DOM oder eines Teils davon erstellen.
Stellen Sie sich zum Beispiel vor, Sie erstellen ein Widget (wie ich es habe), das auf Websites verwendet wird. Ihr Widget könnte vom CSS auf der Seite beeinflusst werden und schrecklich aussehen, während es mit Shadow DOM nicht der Fall ist 🙂
Hier ein toller Artikel zum Thema:
-
Können wir mehrere Instanzen desselben Widgets in verschiedenen Schattendomen haben? Beispiel: – CSS/JS/HTML wäre gleich, zeigt aber auf eine andere Datenquelle/API
– udarakr
20. März 2017 um 8:40 Uhr
-
„Besser“ und „einfacher“ sind subjektiv.
– Pavlo
16. April 2018 um 14:09 Uhr
-
Was ist, wenn Sie nicht nur ein Widget, sondern ein vollständiges HTML-Dokument oder sogar eine interaktive Webseite einbetten? Passt Shadow DOM immer noch gut zu diesem Anwendungsfall? Meiner Erfahrung nach habe ich iFrame nie für andere Widgets verwendet als zum Einbetten ganzseitiger Anwendungen in eine andere Anwendung oder ein anderes Portal. Dies führt zu einer weiteren Fülle von Problemen als nötig, verglichen mit der Verwendung von iFrame, das eine vollständige Kapselung bietet.
– Supertonsky
16. Juni 2021 um 7:09 Uhr
<iframe>s bieten (viel) zu viel Verkapselung.– SLaks
21. Mai 2013 um 18:45 Uhr
Mehr Kapselung auf welche Weise? Welche Dinge verbieten iFrames, die Schatten-DOMs zulassen?
– Le Curious
22. Mai 2013 um 6:00 Uhr
<iframe>s erhalten ihren eigenen Ausführungskontext. Sie unterbrechen auch den Ereignisfluss.– SLaks
22. Mai 2013 um 13:28 Uhr