Polymer - items in DOM-IF returning null in first call

Question

I'm writing because I have problem with understanding how Polymer ready and elements exactly works. I'm using Polymer 2.0.

In my template I have this code:

<template is="dom-if" if="{{isExpanded}}">
        <div id="drop-down-list" >
            <template is="dom-repeat" items="{{employees}}">
                <button on-click="onDropDownItemClick" class="button-style items">{{item}}</button>
            </template>
        </div>
    </template>

On start the isExpandend is false . So the buttons are hidden, or even not created?

Then in some function I switch isExpandend to true and I want to update some styles in that way:

var items = this.shadowRoot.querySelectorAll('.items');
            for(var i=0; i< items.length; i++){
                items[i].style.height = itemHeight;
            }

The problem is - this solution only works with second or more entry to this function. So when I call this function first time, items are null, and nothing changed, but when I call second time and more items = [], and code works good.

What should I do to repair this bug?

Should I do something with "async" I find this on stack but i have no idea how to use it.

Answer 1

I found one possible solution for this problem. I added id too template with dom-if

and before this JS code I write:

this.$["templateID"].render();

This is working, but I don't know it is good?

Answer 2

How do you perform the switch of isExpanded ? Usually when something doesn't work at first but then updates later on interaction that means that you mutated the value incorrectly and maybe you should be using set or push api's to notify about changes.

Do you think you can create a plunker with the example?

Answer 3

Correct behavior for Polymer, the items are not added to the DOM so do not have a height.

Possibly you can add a dom-change event

But more ideal is that you just style the height of the individual elements using CSS. Why set it in a for loop?