Question

我正在努力更好地理解在Polymer 2中使用mixins：这是我的样本：

<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-on-screen; 时，我希望div的颜色为红色，并且在屏幕上居中。我已经验证了它，因为我在课堂上的--center-on-screen中有所有代码.signal。我将它移动到屏幕上 - 仅用于测试目的。如果有人可以告诉我我做错了什么。

**更新**

当我将屏幕上的中心移动到：host然后它可以工作。所以它看起来像这样

        <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 shady css mixin：

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

CSS自定义属性正在得到广泛支持，CSS mixins仍然是一个提案。因此，对CSS mixins的支持已经转移到一个单独的垫片，对于2.0类样式的元素是可选的。为了向后兼容，polymer.html导入包括CSS mixin垫片。类样式元素必须显式导入mixin垫片。

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

Answer 2

感谢您发布此查询。我正在寻找一些关于如何在聚合物2.0中使用css mixins的可靠资源。

我有这个混合 -

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

我尝试将其添加到另一个我希望使用mixin的类 -

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

输出没有应用mixin。尝试加入：主机，它工作！

偶然发现了这个链接，它证实了我是否正确行事。感谢发帖:)

聚合物2应用mixin

2 个答案: