使用聚合物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>

根據文檔中的說明 ，此方法應該有效。 有人可以弄清楚為什么會這樣以及如何正確執行嗎？

Answer 1

這應該做你想要的

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

要么

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

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