選擇器使用聚合物dom的位置錯誤 - 如果

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