When it comes to setting styles dynamically, it's pretty straightforward. However, my question revolves around implementing dynamic styles within a Media Query. Specifically, I want the styling to change based on a property or some calculated JavaScript logic, like adjusting the width of a carousel based on the number of components.
Below is a code snippet that illustrates my attempt (albeit unsuccessful) at applying these dynamic properties:
<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>
Your assistance is greatly appreciated!