Ich erstelle eine Webkomponente mit nativer Implementierung, die in ihrer HTML-Vorlage Links zu Bildern enthält. Diese Links funktionieren jedoch nur, wenn sie absolut oder relativ zum Hauptdokument sind, was bedeutet, dass diese Komponente nicht wiederverwendbar oder portierbar ist. Auch ist es sehr eingängig.

erzeit füge ich allen Elementen, die Bilder verwenden müssen, ein data-url_prefix-Attribut hinzu. Beim Erstellen eines Schattenstamms für mein benutzerdefiniertes Element ersetze ich dann {{URL_PREFIX}} durch den Wert dieses Arguments.

Meine Lösung scheint sehr schlecht zu sein. Ich würde mich sehr freuen, wenn Sie etwas besseres empfehlen, danke.

Ich fand ein interessantes Zitat auf demhttp: //webcomponents.org/polyfills/html-imports Seite

POLYFILL NOTES

In importierten Dokumenten sind die href- und src-Attribute in HTML und die URL-Eigenschaften in CSS-Dateien relativ zum Speicherort des importierten Dokuments und nicht zum Hauptdokument.

Warum würde eine Polifill eine andere Logik als die native Implementierung verwenden?

Web-Komponenten Im Idealfall sollten alle Abhängigkeiten zusammengefasst werden. Wenn für eine Web-Komponente jedoch ein Bild erforderlich ist, sollte die absolute URL zu diesem Bild bekannt sein, sodass die Komponente nicht einfach in der Dateistruktur verschoben werden kann.

Say, zum Beispiel habe ich die folgende Struktur:

index.html css main.css js main.js web_components cool_web_component cool_web_component.html icon.png

Wenn ich es wie folgt ändere:

index.html css main.css js main.js cool_web_component cool_web_component.html icon.png

Ich müsste den Zeiger irgendwo in diesen Dateien auf icon.png setzen. Meine Frage ist, wie ich ihn vermeiden oder auf elegante Weise lösen kann. Warum steht die eigentliche native Implementierung im Konflikt mit den Polyfills?