polymère 2 appliquer MIXIN

Question

J'essaie d'obtenir une meilleure compréhension de l'utilisation mixins en polymère 2: Voici mon exemple:

<dom-module id="x-test"> 
    <template> 

     <custom-style> 
      <style is="custom-style"> 
       html { 

        --center-on-screen: { 
         left: 50%; 
         top: 50%; 
         position: absolute; 
         border: solid 1px red; 
        }; 

       } 
      </style> 
     </custom-style> 

     <style> 

      .signal { 
       border-radius: 30px; 
       height: 30px; 

       width: 30px; 
       @apply --center-on-screen; 
      } 

     </style> 

     <div class="signal"></div> 

    </template> 

    <script> 
     'use strict' 

     class XTest extends Polymer.Element { 

      static get is() { 
       return 'x-test'; 
      } 

      static get properties() { 
       return { 
       } 
      } 

      static get observers() { 
       return []; 
      } 


      constructor() { 
       super(); 


      } 

      ready() { 
       super.ready(); 

      } 

      connectedCallback() { 
       super.connectedCallback(); 
      } 

      connectedCallback() { 
       super.connectedCallback(); 
      } 

     } 

     customElements.define(XTest.is, XTest); 
    </script> 
</dom-module> 

lorsque le code @apply --center sur l'écran; dans la classe, je m'attendrais à ce que la div ait la couleur rouge et soit centrée sur l'écran. Je l'ai vérifié car j'avais tout le code dans --center-on-screen dans la classe .signal. Je l'ai déplacé dans --center-sur-écran juste à des fins de test. Si quelqu'un peut me conseiller sur ce que je fais mal.

** Mise à jour **

Quand je me déplace --center sur écran dans: hôte il fonctionne. il ressemble cette

 <style> 

      :host { 
       --center-on-screen: { 
        left: 50%; 
        top: 50%; 
        position: absolute; 
        border: solid 1px red; 
       } 
      } 

      .signal { 
       border-radius: 30px; 
       height: 30px; 

       width: 30px; 
       border: solid 1px red; 
       @apply --center-on-screen; 
      } 

     </style> 

Answer 1

Essayez d'inclure cd css ombragé mixin: Propriétés

<link rel="import" href="../../bower_components/shadycss/apply-shim.html"> 

CSS personnalisés sont de plus largement pris en charge, mixins CSS reste une proposition. Le support pour les mixins CSS a donc été déplacé vers un shim séparé optionnel pour les éléments de style classe 2.0. Pour la rétrocompatibilité, l'import de polymer.html inclut le CSS mixin shim. Les éléments de style de classe doivent importer explicitement le shim de mixin.

Ref: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

Answer 2

Merci d'envoyer cette requête. Je cherchais une ressource crédible sur la façon d'utiliser les mixins css dans le polymère 2.0.

J'ai eu ce mixin -

--calendarbox-mixin: { 
    display:flex; 
    position:relative; 
    flex-direction: column;   
    border-radius: 5px; 
    --webkit-border-radius:5px; 
    --moz-border-radius:5px; 
    width:11vw; 
    margin:10px 5px;  
    text-align: center; 
    height:18vh; 
    justify-content: space-around; 
    } 

J'ai essayé d'ajouter juste abover une autre classe où je voulais utiliser le mixin -

.dayfare_box { 
     @apply(--calendarbox-mixin); 
     background: #fbfcfc; 
     border:2px solid #e2e2e2; 
    } 

La sortie est venu sans mixin appliquée. J'ai essayé d'ajouter: hôte et ça a marché !!

Je suis tombé sur ce lien et cela m'a confirmé le doute que je faisais bien. Merci d'avoir posté :)