Css 在图元阴影根样式中应用聚合特性

所以动态设置样式很容易，我的问题是基于媒体查询中的动态样式，所以在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>

：主持人{
显示：块；
背景：[[prop2]]；
}
@媒体屏幕和屏幕（最大宽度：1000px）{
背景：[[prop2]]
}
[prop1]]你在这里吗
/**
*@customElement
*@聚合物
*/
类HelloEggs扩展了Polymer.Element{
静态get是（）{return'hello eggs'；}
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“你好，鸡蛋”
},
提案2：{
类型：字符串，
值：'#fc0'
}
};
}
}
window.customElements.define（HelloEggs.is，HelloEggs）；

---

提前谢谢你

没关系，我找到了一个让我快乐的方法，希望能帮助像我这样的人：-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>

：主持人{
显示：块；
背景：#eee；
边缘底部：10px；
}
[prop1]]你在这里吗
/**
*@customElement
*@聚合物
*/
类HelloEggs扩展了Polymer.Element{
静态get是（）{return'hello eggs'；}
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“你好，鸡蛋”
},
提案2：{
类型：字符串，
值：'#fc0'
}
};
}
connectedCallback（）{
super.connectedCallback（）；
let sheet=this.shadowRoot.styleSheets[0]；
sheet.insertRule（`@media screen and（最大宽度：500px）{span{background:${this.prop2}；}}}}`，1）；
}
}
window.customElements.define（HelloEggs.is，HelloEggs）；

我仍然认为能够在极端情况下将属性放在styles区域是很好的，但是如果我使用insertRule应用所有样式，这仍然会给我带来这些，insertRule对于宽度和高度等都很好