Custom elements not detecting children when instantiated in template of another custom element

Question

I have an RPG Main HTML Element defined as follows. I'm instantiating it in the body of my index.html file.

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="gridlayout.html">
 <link rel="import" href="gridtile.html">


<polymer-element name="rpg-main" attributes="">
  <template>
    <style>
      grid-tile {
      background: #FF00FF;
      width: 50px; 
      height: 50px     
      }
     :host {
       position: absolute;
       display: block;
       width: 500px;
       height: 500px;
      }

    </style>
    <grid-layout rows = "2" cols = "2" spacing = "50px">
       <grid-tile>
       </grid-tile>
       <grid-tile>
       </grid-tile>
       <grid-tile>
       </grid-tile>
       <grid-tile>
       </grid-tile>
    </grid-layout>
  </template>
  <script type="application/dart" src="rpgmain.dart"></script>
</polymer-element>

As one would expect, I also have grid-layout and grid-tile elements defined. In the constructor for the grid-layout, I am trying to reference its children. But the element thinks it has 0 children when it is instantiated in the above rpg-main class.

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('grid-layout')
class GridLayout extends PolymerElement {
  @published int rows;
  @published int cols;
  @published int spacing;

  String _px = "px";
  String _perc = "%";

  GridLayout.created() : super.created() {

    print("NUM CHILDREN " + this.children.length.toString());

   /** for (int i = 0; i <= this.rows + this.cols - 2; i++) {
      Element child = this.children[i];
      this.children[i].style.margin = this._parseNum(spacing);
      child.style.float = "right";

      if (i % this.rows == this.rows) {
        child.style.clear = "right";
      }


    }**/
  }
  num _parseString(String s) {
    print(s.toString());
    return num.parse(s.split(_px)[0]);
  }

  String _parseNum(num n) {
    return n.toString() + _px;
  }
}

***The above code prints "NUM CHILDREN: 0"

It's only being instantiated in my rpg-main element, so I'm surprised it wouldn't recognize the grid-tiles as children. Could it be because the grid-layout element is being instantiated in the template tag of an rpg-main custom element? (So maybe grid-layout doesn't consider its children to be in the 'light dom'?) That would be a shame, but if so, what would the workaround be?

This is a little old and in JS instead of Dart, but it might be helpful as you work on this: github.com/cletusw/rpg — CletusW
Hey that's pretty cool. In general how did you find Polymer for this sort of thing? Figured it might lend itself decently to games since it's more like object oriented programming than previous html5. — Luke Gehorsam
So far it's been way nice. I think performance problems would arise if I tried to scale to the size and complexity of a real game. — CletusW

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-07-01T06:53:36

The constructor is just the wrong place. You need to allow the elements to properly initialize before using them.

Try

@override
void attached() {
  super.attached();
  print("NUM CHILDREN " + this.children.length.toString());
}

see also Justins answer here When is shadowRoot available to a polymer component?

Custom elements not detecting children when instantiated in template of another custom element

1 Answers