onRendered of a Blaze template seems to fire before DOMElement content is ready.

[trusktr]

For example, I have:

<template name="hwk1">
    {{#Node}}
        {{#DOMElement}}
            <canvas id="gl-canvas" width="100" height="100"></canvas>
        {{/DOMElement}}
    {{/Node}}
</template>

Template.hwk1.onRendered(()=>{
  document.getElementById('gl-canvas') // null
})

It seems like the DOMElement content isn't ready yet at that point.

I can work around it by doing:

<template name="hwk1">
    {{#Node}}
        {{#DOMElement}}
            {{>hwk1Content}}
        {{/DOMElement}}
    {{/Node}}
</template>

<template name="hwk1Content">
    <canvas id="gl-canvas" width="100" height="100"></canvas>
</template>

Template.hwk1Content.onRendered(()=>{
  document.getElementById('gl-canvas') // it works
})

[gadicc]

I think your "workaround" will most likely be our recommended pattern.

The way Engine is written, stuff being added to the Scene graph has no relation to when it's on the DOM. I could provide an _onRender hook for DOMElement's, which could perhaps be a useful shortcut, but I know some people have found it a source of confusion too.

I think probably what you described is the most straight-forward Meteor way of doing things, I'd like to encourage the idea of separation of "scene graph is a different world to the DOM, and you should use famous-views stuff in there... but anything inside a DOMElement is regular Meteor land as far as the DOM is concerned".

[trusktr]

I totally don't know, but it seems to me like

Template.hwk1Content.onRendered(()=>{
  document.getElementById('gl-canvas') // it works
})

is a race condition, because if I can't access the parent DOMElement's HTMLElement when the parent has onRendered, how is it that I can call document.getElementById('gl-canvas') in the child if I can't access it in the parent (assuming the child onRendered fires first before the parent)? Or does the child onRendered fire after the parent?

Are there docs on how to make a component so that it accepts children? f.e.

{{#MyComponent}}
  put stuff here
{{/MyComponent}}