I have element like that:
<polymer-element name="my-app">
<template>
<template id="page_template" if="{{authenticated}}">
<my-page id="page"></my-page>
</template>
</template>
<script src="..."></script>
</polymer-element>
I need to perform some initialization when template with id=="page_template" will be actually instanced into DOM.
I've tried to make something like that:
authenticatedChange(_) {
if(authenticated)
shadowRoot.querySelector('#page').addEventListener(...);
}
But got this:
Exception: The null object does not have a method 'addEventListener'
Looks like 'page' just doesn't exists yet. Then I tried to put creation event to the end of event-loop:
authenticatedChange(_) {
if(authenticated)
Timer.run(()=>shadowRoot.querySelector('#page').addEventListener(...));
}
This works, but I doubt it is a good style, because there is no guarantee it will actually be created to that step (it's completely implementation-dependent), because no explicit dependency like a Future or callback wasn't binded to event when template is instantiated.
So the question is, does such event exist? All I found was 'template-bound', but this code
$['page_template'].on['template-bound'].listen((_)=>print("template-bound!"));
being executed in MyApp.created(), generates silence in console.
How to bind my code to instantiate/deinstantiate events?
onMutation($['page_template']).asStream().listen((_)=>print("mutated."));
Also didn't work for me.
$['page_template'].shadowRoot is null, so I can't bind to it's mutation at all.
