CODEWITHSUNDEEP
javascriptdomdata-bindingpolymerpolymer-1.0
djthoms
djthoms

Reputation: 3096

Incorrect placement of selector using Polymer dom-if

I'm trying to use a conditional template to show additional content if the user supplies an attribute to a custom element.

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

I call the custom element as follows:

 <demo-element icon="protected">Title</demo-element>

When I inspect the rendered result in the browser, I see:

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

but I should see:

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

Based on what the documentation says, this approach should work. Can someone clarify why this is happening and how to do this correctly?

Upvotes: 2

Views: 60

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

This should do what you want

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

or

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

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

Upvotes: 4

Related Questions