iron-media-queryを使ってPolymerカスタム要素にCSSを適用する

Question

Polymer APIの<iron-media-query>を使用して、カスタム要素で簡単な「メディアクエリ」動作を実現しようとしています。

私はいくつかのテキストが上部にあり、その下にメインコンテンツがあるとします。 私の目標は、要素が大きな画面に表示されるようにメディアのクエリを書くことです（768px私のテストのために）、私はいくつかの簡単なマージンと要素のローカルDOMスタイルのパディングの変更を行うことができます。

私はそれを動作させることはできません。 私はここに完全に恋しい何かがありますか？

<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> 

私はまた、テンプレートとちょうど私が欲しいのスタイルを変更するが、それはどちらか動作しません。「もし」の内側（スタイルやマークアップ付き）全体のテンプレートをコピーしてみました。

は（すべてがコンテンツcontainer.htmlで同じファイル、内部にある）

Answer 1

この（which is the one used in the iron-media-query demo）を達成する最も簡単な方法の1つattribute selectorsとともに、ポリマーのannotated attribute bindingsを使用することです。

要素のテンプレートの簡単な例は、この

<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> 

のようになります。ここではどこでも<dom-module>（でもdom-if）内部

Answer 2

<style>タグは（すぐに要素に適用されているアクションでそれを示すfiddleですこのdemoのように）<style>をdom-ifの中に入れても条件付きスタイルは得られません。

<iron-media-query>を使用する唯一の目的は、条件付き<style>を追加することだけだった場合、要素はまったく必要ありません。ただ、CSSで正常にメディアクエリを使用します。

<style> 
    ... 

    #title { 
     color: #7DB8C9; 
     font-size: 1.3em; 
    } 

    @media (max-width:768px) { 
     #title { 
      color: #000000; 
      font-size: 1.8em; 
     } 
    } 
</style> 

codepen