在元素阴影根样式中应用聚合物属性

时间:2018-09-17 18:41:15

标签: css polymer-2.x shadow-dom

所以动态设置样式很容易,我的问题是基于Media Query中的动态样式,因此在max-width:1000px之间,我希望样式是基于属性或某些计算出的JS(例如总数)转盘的宽度与组件数量的关系。

无论如何,这是一段无效的代码片段,但显示了我对如何使用属性的想法:-P

    <link rel="import" href="../../bower_components/polymer/polymer-element.html">

    <dom-module id="hello-eggs">
      <template>
        <style>
          :host {
            display: block;
            background: [[prop2]];
          }

          @media screen and (max-width: 1000px) {
            background: [[prop2]]
          }
        </style>
        <span>[[prop1]] are here</span>
      </template>

      <script>
        /**
        * @customElement
        * @polymer
        */
        class HelloEggs extends Polymer.Element {
          static get is() { return 'hello-eggs'; }
          static get properties() {
            return {
              prop1: {
                type: String,
                value: 'Hello Eggs'
              },
              prop2: {
                type: String,
                value: '#fc0'
              }
            };
          }
        }

        window.customElements.define(HelloEggs.is, HelloEggs);
      </script>
    </dom-module>

提前谢谢

1 个答案:

答案 0 :(得分:0)

没关系,我想出了一种使我开心的方法,并希望能帮助像我这样的其他人:-D

基本上,我得到样式表并为新的媒体查询插入规则,该规则可让我设置所需的内容。我也将宽度更改为500px

    <link rel="import" href="../../bower_components/polymer/polymer-element.html">

    <dom-module id="hello-eggs">
      <template>
        <style>
          :host {
            display: block;
            background: #eee;
            margin-bottom: 10px;
          }
        </style>
        <span>[[prop1]] are here</span>
      </template>

      <script>
        /**
        * @customElement
        * @polymer
        */
        class HelloEggs extends Polymer.Element {
          static get is() { return 'hello-eggs'; }
          static get properties() {
            return {
              prop1: {
                type: String,
                value: 'Hello Eggs'
              },
              prop2: {
                type: String,
                value: '#fc0'
              }
            };
          }

          connectedCallback() {
            super.connectedCallback();

            let sheet = this.shadowRoot.styleSheets[0];
            sheet.insertRule(`@media screen and (max-width: 500px) { span { background: ${this.prop2}; } }`, 1);
          }
        }

        window.customElements.define(HelloEggs.is, HelloEggs);
      </script>
    </dom-module>

在极端情况下,我仍然认为能够在样式区域中放置属性会很棒,但是如果我将所有样式都应用到insertRule上(这对宽度和高度等都很有用),这仍然给我带来了好处。