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