Ich erstelle ein Widget für Websites von Drittanbietern und verwende Shadow DOM, um zu verhindern, dass deren CSS unsere stört. Ich verwende die Polyfills ShadyDOM und ShadyCSS , damit es in Edge und IE funktioniert, aber es transformiert das CSS für das Schatten-DOM nicht wie erwartet.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>
In Chrome (das Schatten-DOM nativ unterstützt) hat das stuff
div erwartungsgemäß einen rosa Hintergrund. Aber in Edge (das Shadow DOM nicht nativ unterstützt) sehe ich den Text "Zeug im Schattendom" (was bedeutet, dass mein Skript ausgeführt wurde und die ShadyDOM-Funktionen funktionierten), aber ich sehe den rosa Hintergrund nicht.
Warum passiert dies? Ich hänge eine Schattenwurzel an ein einfaches altes div an, anstatt benutzerdefinierte Elemente zu verwenden, wie es das Beispiel in der ShadyCSS README tut, aber spielt das eine Rolle? Wenn ja, wie kann ich das zum Laufen bringen? Ich arbeite an einer großen, vorhandenen App und möchte nicht zu viele Änderungen gleichzeitig vornehmen. Daher würde ich es vorziehen, die Standard-HTML-Elemente zu verwenden, die ich bereits verwende ( div
s, button
s usw.), anstatt meine zu entwickeln eigene Elemente oder Vorlagen , obwohl ich bereit wäre, Vorlagen und / oder benutzerdefinierte Elemente in Betracht zu ziehen, wenn dies einfach möglich ist, ohne viele große Änderungen vornehmen zu müssen.
quelle
style
Elements direkt an das Innerediv
anstelle der Schattenwurzel, das Anhängen desstyle
Elements nach dem Anhängen des Innerendiv
und das FestlegeninnerHTML
desstyle
Elements nach dem Anhängen. Aber keines dieser Dinge half.:host
aus dem CSS-Selektor entferne , werden die Stile angewendet. Sie werden aber auch auf Dinge außerhalb der Schattenwurzel angewendet, die ich nicht will.ShadyCSS.styleElement(element)
und ausprobiertShadyCSS. styleSubtree(element)
und sie haben nicht funktioniert.style
Tags an der richtigen Stelle zu platzieren und die Abmessungen entsprechend anzupassen. Das Rendern ist langsam und umständlich zu handhaben, daher habe ich es geändert, um Schatten-DOM zu verwenden. Jetzt funktioniert es wunderbar in allen Nicht-Microsoft-Browsern. Ich versuche, es mit der Polyfüllung in Edge und IE zum Laufen zu bringen, aber es funktioniert nicht.Antworten:
Mit ShadyCSS
:host
CSS-Pseudoelement ist in Edge nicht bekannt.Damit es funktioniert, sollten Sie Folgendes verwenden
ShadyCSS.prepareTemplate()
, um: host durch den Namen des benutzerdefinierten Elements zu ersetzen und den Stil als globalen Stil zu definieren, der für alle Seiten gilt.Denken Sie daran, dass Edge kein Schatten-DOM enthält: Es gibt keine Grenzen / Bereiche für CSS mit einem gefälschten / polygefüllten Schatten-DOM.
In Ihrem Fall könnten Sie
ShadyCSS.prepareTemplate( yourTemplate, 'div' )
wie im folgenden Beispiel verwenden:Hinweis: Da die Polyfüllung: host durch div ersetzt und als globalen Stil hinzufügt, können einige Nebenwirkungen auftreten, wenn Sie einen anderen übereinstimmenden HTML-Codeteil haben
div .stuff
.Ohne ShadyCSS
ShadyCSS wurde für benutzerdefinierte Elemente entwickelt, jedoch nicht für Standardelemente. Sie sollten sich jedoch von der Polyfüllung inspirieren lassen und die Stileigenschaften für gefälschte (polygefüllte) Schatten-DOM explizit erstellen. In Ihrem Fall ersetzen Sie
:host
durchdiv#containter
:quelle