2016-03-02 8 views
16

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 /?

+0

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

Antwort

12

Das Problem ist, dass ::shadow und /deep/ Bruch Einkapselung. Ich bin froh, dass sie weg sind.

Die gute Substitute sind:

+0

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

+0

@MarcG Wenn es keinen Mechanismus gibt, um die Kapselung zu unterbrechen, wie kann ich Framework-Styling außer Kraft setzen? – adamdport

1

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