Die beiden Shadow-Piercing-Kombinatoren sind veraltet, wie in https://www.chromestatus.com/features/6750456638341120
angegeben. Was ist der Ersatz für die gleiche Sache, oder diese Schatten-Piercing-Funktion wurde vollständig aufgegeben?Was ist der Ersatz für :: Schatten und/tief /?
Antwort
Das Problem ist, dass ::shadow
und /deep/
Bruch Einkapselung. Ich bin froh, dass sie weg sind.
Die gute Substitute sind:
- CSS Variablen. Es funktioniert bereits nativ mit dem kürzlich gestarteten Google Chrome 49. Lesen Sie hier:
:host-context
. Lesen Sie hier: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
In Fällen, in denen Sie nicht auf das Shadow-DOM zugreifen können, bevor es gerendert wird, ist es unmöglich, ':: shadow' zu vermeiden. – RenaissanceProgrammer
@MarcG Wenn es keinen Mechanismus gibt, um die Kapselung zu unterbrechen, wie kann ich Framework-Styling außer Kraft setzen? – adamdport
Ab Polymer 2:
::shadow
(shadow-Piercing-Selektoren) - kein direkter Ersatz ist. Stattdessen müssen benutzerdefinierte CSS-Eigenschaften verwendet werden. Polymer 2: Custom CSS Properties/deep/
- es irgendeine Art von Austausch ist durch:host > * { ... }
definieren (gilt einen Regelsatz für alle der Top-Level-Kinder im Schatten Baum des Wirtes, der mit der Regel nicht im Hauptdokument in Konflikt geraten).
Weitere Informationen überprüfen Polymer 2 Upgrade Notes
Für etwas zu ersetzen ':: shadow' und' deep', die jetzt funktioniert, verwenden Sie ein 'style' Element in Ihrem Schatten Wurzel, mit so etwas wie' @import URL ('/common-style.css') '. Siehe http://stackoverflow.com/questions/34699350/shadow-piercing-descendant-combinator-deep-including-shadow-pseudo-el/34706299#34706299 und http://stackoverflow.com/questions/30829019/polymer-share -styles-across-elements/32941101 # 32941101 Die längerfristige Lösung ist [CSS-benutzerdefinierte Eigenschaften (auch bekannt als "CSS-Variablen")] (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). – sideshowbarker