Polymer 2 gelten mixin

Question

Ich versuche, ein besseres Verständnis von 2, Mixins in Polymer zu erhalten: Hier ist mein Beispiel:

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

, wenn der Code @apply --center-on-Bildschirm; in der Klasse, würde ich erwarten, dass die div die Farbe rot haben und auf dem Bildschirm zentriert sein. Ich habe es verifiziert, weil ich den gesamten Code in --center-on-screen in der Klasse .signal hatte. Ich habe es nur zu Testzwecken in den Bildschirm "--center-on-screen" verschoben. Wenn mir jemand Ratschläge geben kann, was ich falsch mache.

** Update **

Wenn ich mich bewege --center-on-Bildschirm in: Host dann funktioniert es. So sieht es aus wie dieses

 <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

Versuchen Sie cd schattigen css mixin sind:

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

CSS benutzerdefinierte Eigenschaften weitgehend unterstützt werden immer bleiben CSS Mixins einen Vorschlag. So wurde die Unterstützung für CSS-Mixins in eine separate Shim verschoben, die für 2.0-Elemente im Klassenstil optional ist. Aus Gründen der Abwärtskompatibilität enthält der polymer.html Import das CSS Mixin Shim. Elemente im Klassenstil müssen das Mixin-Shim explizit importieren.

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

Answer 2

Vielen Dank für diese Abfrage zu veröffentlichen. Ich suchte nach einer glaubwürdigen Quelle zur Verwendung von css-Mixinen in Polymer 2.0.

ich diesen mixin hatte -

--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; 
    } 

versuchte ich es nur abover eine andere Klasse hinzugefügt, wo ich die mixin verwenden wollte -

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

Der Ausgang kam ohne mixin angewendet. Versucht hinzuzufügen: Host und es hat funktioniert !!

Bin gerade auf diesen Link gestoßen und es bestätigte meine Zweifel, ob ich es richtig gemacht habe. Danke für das Posten :)