ポリマー2は、私がポリマー2でミックスインを使用してのより良い理解を取得しようとしている

Question

MIXIN適用されます。ここに私のサンプルです：

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

時にコード@apply --centerオンスクリーン;をクラスに追加すると、divが赤色になり、画面の中央に表示されます。クラスの.signalに--center-on-screenのすべてのコードがあるので、私はそれを確認しました。私はそれをテスト目的のためだけに--center-on-screenに移しました。誰かが私が間違ってやっていることについて私にアドバイスできれば。

**更新**

私はに--centerオンスクリーン移動

：ホストは、それが動作します。だから、見えるこの

 <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

のようにCD怪しげなCSSのミックスインを含めるようにしてください：

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

CSSのカスタムプロパティは、CSSのミックスインが提案まま、広くサポートになっています。そのため、CSSミックスインのサポートは2.0クラススタイルの要素ではオプションの別のシムに移動されました。下位互換性のために、polymer.htmlインポートにはCSS mixin shimが含まれています。クラススタイルの要素は、mixinシムを明示的にインポートする必要があります。

参考：このクエリを投稿するためのhttps://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

Answer 2

感謝。ポリマー2.0でCSSミックスインを使用する方法について、信頼できるリソースを探していました。

私はこのミックスインを持っていた -

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

私はちょうど私がミックスインを使用していた別のクラスaboverそれを追加しようとした -

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

出力が適用されるミックスインなしで来ました。追加しようとした：ホストとそれは働いた！

ちょうどこのリンクに遭遇し、私がそれを正しくやっているかどうかは疑いの余地がありませんでした。投稿ありがとう：