Elements created at runtime, can't know when ready

[omerts]

Hello,

I have a dynamic list of tags, which are held in an array, and change during runtime.
I have a created a custom element called "feed-tag" which is used to represent a single tag.
To actually create the feed-tags, I have the following code:

<template repeat="{{tag in tagList}}">
          <feed-tag avatar="{{tag.avatar}}" caption="{{tag.caption}}" 
                          tagID="{{tag.tagID}}" on-tag-cleared="{{removeTagFromEvent}}">
           </feed-tag>
</template>

Everytime a tag is added, I check if there is an overflow, and decide if to turn the horizontal list of tags into a dropdown menu. Now since, there is a delay between the adding of a tag, to the actual creation of the feed-tag element, my overflow check results are wrong. I tried to bind to polymer's "ready" event using the following options, but was unsuccessful:

polymer-ready="{{checkOverflow}}"
on-ready="{{checkOverflow}}"
onready="{{checkOverflow}}"
onload="{{checkOverflow}}"
on-load="{{checkOverflow}}"

I know I can fire a custom event, from within the feed-tag element, but it just seems wrong to have to do it.
So my question is, is there anyway to bind to Polymer's ready event from the outside?

[miztroh-zz]

Instead of doing it that way, you can can just set up a mutation observer on the parent element and listen for changes to its children.

https://www.polymer-project.org/docs/polymer/polymer.html#onMutation

[omerts]

Hey miztroh,

First of all, thank you for the quick response. Your answer is good for my specific problem, but we need a more global solution. If my parent had other children, which are not tags, then your solution wouldn't work for me. I think that being able to bind to an element's lifecycle methods could be very helpful in many scenarios.

[miztroh-zz]

I'm not sure whether Polymer element lifecycle events bubble up. However, if you have another scenario in mind, I might have another suggestion that works there too ;)

[arthurevans]

polymer-ready is a global event, on window. It's fired once, when Polymer is initialized and the initial set of elements have been upgraded.

ready is a callback that you can define on the prototype of your element, not an event. Theoretically you could have your feed-element fire an event when it's attached, but I suspect that's overkill.

You can use this.async to schedule your overflow check for the next microtask. If you tend to update the array frequently, you could use this.job, which also debounces the request. In both cases, the timeout is optional -- without a timeout, your function is called in the next microtask, in any case, synchronized with requestAnimationFrame.

[omerts]

Ended up using this.async. Thank you for your help :).