Polymer dom-ifを使用したセレクタの配置が正しくない

Question

ユーザが属性をカスタム要素に指定する場合は、条件付きテンプレートを使用して追加コンテンツを表示しようとしています。

<dom-module id="demo-element"> 
    <template> 
     <div> 
      <template is="dom-if" if="{{icon}}"> 
       <i class="{{icon}} icon"></i> 
      </template> 
      <slot></slot> 
     </div> 
    </template> 

    <script> 
     Polymer({ 
      is: 'demo-element', 

      properties: { 
       icon: { type: String } 
      } 
     }); 
    </script> 
</dom-module> 

次のように私はカスタム要素を呼び出す：私は、ブラウザでレンダリング結果を検査すると、私は見

<demo-element icon="protected">Title</demo-element> 

：

<demo-element icon="protect"> 
    <div class="foo style-scope demo-element protect"> 
     <i class="style-scope demo-element"></i> 
     <template is="dom-if" class="style-scope demo-element"></template> 
     Title 
    </div> 
</demo-element> 

が、私が表示されるはずです。

を

<demo-element icon="protect"> 
    <div class="foo style-scope demo-element"> 
     <i class="protect icon style-scope demo-element"></i> 
     <template is="dom-if" class="style-scope demo-element"></template> 
     Title 
    </div> 
</demo-element> 

何番目e documentation saysの場合、この方法が有効です。なぜこれが起こっているのか、これを正しく行う方法を明確にすることはできますか？

Answer 1

これは問題だ何が

<i class$="{{icon}} icon" 

または

<i class$="[[icon]] icon" 

https://www.polymer-project.org/1.0/docs/devguide/data-binding#native-binding