Polymère 2.0 propriété de style personnalisé ne fonctionne pas sous dom-module

Question

J'ai mis à jour le projet de polymère à la version 2.0. Après cela, une classe CSS est manquante dans div.

Il y a un lien vers fer-flex layout.html de my-home.html

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> 

Et dans my-home.html page ont des styles comme suit:

<dom-module id="my-home"> 
<template> 
<style is="custom-style"> 
.flex-vertical { 
    @apply --layout-vertical; 
    height: 100vh; 
} 

.flexchild-vertical { 
    @apply --layout-flex; 
    @apply --layout-horizontal; 
} 
</style> 
</template> 
</dom-module> 

Ces styles appellent de fer-flex layout.html

--layout-vertical 
--layout-flex 
--layout-horizontal 

Mais ce n'est pas le chargement dans ma sortie. Voici les captures d'écran de mon navigateur:

Ancienne version:

Version améliorée:

Je pense que le problème peut à cause de cela il y a un #shadow-root généré. Puis-je modifier des liens de style/liens html ou d'autres éléments dans mon code?

Answer 1

Oui! Vous avez la réponse d'ici: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

C'est le problème de version avec le iron-flex-layout. Je viens de le mettre à jour et tout va bien maintenant.

La dernière version (2.0) ont un objet <custom-style> enveloppant tout les styles à l'intérieur iron-flex-layout.html

Voici la dernière version: https://github.com/PolymerElements/iron-flex-layout