ich mit Eric Bidelman des <fancy-tabs> Schatten dom Beispiel experimentiert wurde: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdomKann nicht hinzufügen :: after Pseudo-Element zu geschlitzte Elemente im Schatten dom
Und versuchtes Material Design Styling, um es hinzuzufügen, was eine Zugabe erfordern würde: nach dem Pseudo-Element zu den Tabs.
Nach einigen Experimenten fand ich, dass die internen Stile für die Anwendung Pseudo-Elemente erscheinen zu arbeiten, wenn Polymer verwendet wird, aber nicht, wenn Vanille JS mit ...
Beispiel Polymer: https://jsbin.com/maqaze/edit?html,output
Vanille JS Beispiel :
In diesem zweiten Beispiel funktioniert die Anwendung des: After-Pseudo-Elements nicht innerhalb des Schattens <style>, es muss anscheinend extern festgelegt werden.
https://jsbin.com/toxalu/edit?html,output
Also meine Frage ist, wie sollte man ein Pseudoelement mit einem Schlitz/Licht dom Element geht über das Hinzufügen, ohne externe Stile verwenden zu benötigen?
(haben diese Beispiele auf Chrome und Safari versucht)
Der Hauptpunkt von Shadow-DOM besteht darin, CSS-Stile von _outside_ zu trennen. Indem Sie tun, was Sie fragen, wären Sie tatsächlich kontraproduktiv. Wenn Sie Light-DOM-Elemente im Shadow-DOM haben, sollten Sie sie außerhalb des Shadow-DOMs stylen. – alesc
Die Spezifikation ermöglicht es Ihnen, den Stil für "verteilte" Knoten zu ändern (dh Benutzer beigetragen Licht-dom, die in den Schattenbaum des Elements geschlitzt ist) https://developers.google.com/web/fundamentals/getting-started/primers/ shadowdom # stylinglightdom Die Frage, die ich stelle, ist, ob es Ihnen auch erlaubt, die Eigenschaften von CSS-Pseudoelementen zu ändern: after und: before. Vielleicht wird dies als "Hinzufügen von Kisten" zum Lichtdom betrachtet und ist daher als nicht zulässig. Ich wurde von der Tatsache, dass es in dem obigen Polymer-Beispiel funktioniert, geworfen, aber vielleicht ist das ein Problem mit dieser Implementierung selbst? – evaneus