使用 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>

根据 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

使用 Polymer dom-if 的选择器放置不正确

Incorrect placement of selector using Polymer dom-if

javascript

data-binding

dom

polymer

polymer-1.0