所以动态设置样式很容易,我的问题是基于媒体查询中的动态样式,所以在max-width:1000px之间我希望样式是基于属性或某些计算JS的东西,如a的总宽度旋转木马的组件数量。
无论如何这里是一个不起作用的代码片段,但显示了我如何应用我对HOPED属性的思考:-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>
先感谢您
没关系,我找到了让我开心的方式,并希望能帮助像我这样的其他人:-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,这对于宽度和高度等都很有用,这仍然会给我这个。