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的选择器位置不正确 - 如果

1 个答案: