ポリマービヘイビアを子要素にバインドする方法はありますか？

Question

私は約Behaviors in Polymerを読んでいます。

私はコピー/貼り付けた例をhighlight-behavior.htmlため：

<script> 
HighlightBehavior = { 

    properties: { 
    isHighlighted: { 
     type: Boolean, 
     value: false, 
     notify: true, 
     observer: '_highlightChanged' 
    } 
    }, 

    listeners: { 
    click: '_toggleHighlight' 
    }, 

    created: function() { 
    console.log('Highlighting for ', this, 'enabled!'); 
    }, 

    _toggleHighlight: function() { 
    this.isHighlighted = !this.isHighlighted; 
    }, 

    _highlightChanged: function(value) { 
    this.toggleClass('highlighted', value); 
    } 

}; 

その後、私の要素に私は（ちょうど重要な部分）以下の持っている：

<link rel="import" href="highlight-behavior.html"> 

<dom-module id="highlighting-test"> 
    <template> 
    <style> 
     :host { 
      display: block; 
      background-color: red; 
     } 

     :host.highlighted { 
      background-color: green; 
     } 

     .highlighted { 
     background-color: green; 
     } 
    </style> 

    <h1>Click anywhere here to toggle highlighting!</h1> 
    </template> 

    <script> 
    Polymer({ 
     is: 'highlighting-test', 
     behaviors: [HighlightBehavior] 
    }); 
    </script> 
</dom-module> 

今問題は、highlightedクラスの切り替えは、ホスト要素内をクリックしたときに機能しますが、それは単にh1要素を強調表示していないことですnt。ホスト要素にhighlightedクラスを追加しています。

これは、それがブラウザに表示される方法です。

<highlighting-test class="highlighted"> 
    <h1 class="style-scope highlighting-test">Click anywhere here to toggle highlighting!</h1> 
</highlighting-test> 

クリックすると、私は確かにそれがホスト要素highlighting-testと背景の変化にhighlightedクラスを切り替えていることがわかります。

強調表示の動作がh1タグだけに適用されるようにするにはどうすればよいですか？

Answer 1

使用this.toggleClass(className, bool, this.$.id_of_element)

Answer 2

変更：

_highlightChanged: function(value) { 
    this.toggleClass('highlighted', value); 
} 

へ：

_highlightChanged: function(value) { 
    this.$.hId.toggleClass('highlighted', value); 
} 

そしてHTML内H1にIDを追加します。

<h1 id="hId">Click anywhere here to toggle highlighting!</h1>