聚合物2应用混合

Question

I'm trying to get a better understanding of using mixins in Polymer 2: Here is my sample:

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

when the code @apply --center-on-screen; in the class, I would expect the div to have the color red and be centered on the screen. I have verified it because I had all the code in --center-on-screen in the class .signal. I moved it into --center-on-screen just for testing purposes. If anyone can advise me on what i'm doing incorrectly.

**Update **

When I move --center-on-screen into :host then it works. So it looks like this

        <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

Try to include cd shady css mixin:

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

CSS custom properties are becoming widely supported, CSS mixins remain a proposal. So support for CSS mixins has been moved to a separate shim that is optional for 2.0 class-style elements. For backwards compatibility, the polymer.html import includes the CSS mixin shim. Class-style elements must explicitly import the mixin shim.

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

Answer 2

Thanks for posting this query. I was searching some credible resource on how to use css mixins in polymer 2.0 .

I had this 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;
  }

I tried adding it just abover another class where I wanted to use the mixin -

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

The output came without the mixin applied. Tried adding in :host and it worked!!

Just stumbled upon this link and it confirmed my doubt whether I was doing it right. Thanks for posting :)