폴리머 2 내가 폴리머 2 년이나 mixin을 사용하는 더 나은 이해를 얻기 위해 노력하고있어

Question

믹스 인 적용 : 여기 내 샘플입니다 :

<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가 붉은 색을 가지고 화면 중앙에 위치 할 것으로 기대합니다. 모든 코드가 클래스. 시그널의 --center-on-screen에 있었기 때문에 나는 그것을 확인했다. 테스트 목적으로 --center-on-screen으로 옮겼습니다. 누군가 내가 잘못하고있는 것에 대해 조언 할 수 있다면.

** 업데이트 **

나는에 --center - 화면 이동

: 호스트가 다음 작동합니다. 그래서 CD 그늘 CSS를 믹스 인을 포함하려면이

 <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

시도처럼 보인다 :

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

CSS 사용자 정의 속성을 광범위하게 지원되고있다, CSS의 유지 mixin은 제안 남아있다. CSS mixins에 대한 지원이 2.0 클래스 스타일 요소에 대해 선택적 인 별도의 심으로 이동되었습니다. 이전 버전과의 호환성을 위해 polymer.html 가져 오기에는 CSS mixin shim이 포함되어 있습니다. 클래스 스타일 요소는 믹스 인 심을 명시 적으로 가져와야합니다.

참고 :이 쿼리를 게시 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; 
    } 

가 출력이 적용되는 믹스 인없이 온을

나는이 믹스 인을했다. 추가 시도 : 호스트와 그것은 일했다!!

이 링크를 우연히 발견하고 내가 올바르게하고 있는지 의심 스럽습니다. 게시 해 주셔서 감사합니다.