Applying CSS to Polymer custom element with iron-media-query - html

Question

I'm trying to achieve a simple 'media-query' behavior on my custom element using <iron-media-query> from the Polymer API.
Assume i have a container with some text on top the top, and below it is the main content..
My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles.
I just can't make it work.
Is there something i completely missed here ?
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<template is="dom-if" if="{{isMobilePhone}}">
<style>
#title {
color: #000000;
font-size: 1.8em;
}
</style>
</template>
<template>
<style>
:host {
background-color: gray;
flex-direction: column;
margin: auto;
margin-top: 40px;
display: flex;
width: 90%;
flex-grow: 1;
max-width: 1300px;
}
#title {
color: #7DB8C9;
font-size: 1.3em;
}
.content-wrapper {
height: 100%;
}
</style>
<p id="title">
[[title]]
</p>
<div class="content-wrapper">
<content select=".content"></content>
</div>
</template>
<script>
Polymer({
is: 'content-container',
properties: {
title: String,
isMobilePhone: Boolean
},
listeners: {
'tap': 'spit'
},
spit: function() {
console.log("BOOL: " + this.isMobilePhone);
}
});
</script> </dom-module>
I also tried copying the whole template ( with styles and markup ) inside the 'if' template and just modify the styles i want, but it doesn't work either.
(Everything is inside the same file, which is content-container.html)

Answer 1

One of the easiest ways to achieve this (which is the one used in the iron-media-query demo) is to use Polymer's annotated attribute bindings together with attribute selectors.
A simple example of an element's template would look like this
<template>
<style>
.content-wrapper ::content {
color: blue;
}
.content-wrapper[mobile-layout] ::content {
color: green;
}
</style>
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
<content></content>
</div>
</template>
Here's a fiddle showing it in action

Answer 2

<style> tags anywhere inside a <dom-module> (even dom-if) are applied to the element immediately (as seen in this demo), so putting <style> inside a dom-if would not give you conditional styles.
And if the only purpose of using <iron-media-query> was to add a conditional <style>, you don't need the element at all. Just use the media query normally in CSS:
<style>
...
#title {
color: #7DB8C9;
font-size: 1.3em;
}
#media (max-width:768px) {
#title {
color: #000000;
font-size: 1.8em;
}
}
</style>
codepen