聚合物 2 应用 mixin

Question

我试图更好地理解在 Polymer 2 中使用混入：这是我的示例：

<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; 在 class 中时，我希望 div 的颜色为红色并以屏幕为中心。我已经验证了它，因为我在 class .signal 的 --center-on-screen 中拥有所有代码。我将其移至 --center-on-screen 只是为了测试目的。如果有人能告诉我我做错了什么。

**更新**

当我将 --center-on-screen 移动到 :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 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.

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

Answer 2

感谢您发布此查询。我正在搜索一些关于如何在 polymer 2.0 中使用 css mixins 的可靠资源。

我有这个 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;
  }

我尝试将它添加到另一个 class 上面我想使用 mixin -

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

输出未应用 mixin。尝试添加 :host 并且成功了！

刚刚偶然发现这个 link，它证实了我对自己是否做对了的怀疑。感谢发帖 :)

聚合物 2 应用 mixin

Polymer 2 apply mixin

mixins

polymer