Creating custom _nested_ html tags using x-tag

Question

I'm attempting to create a custom html tag using Mozilla's http://www.x-tags.org/. I have been able to register a test tag and use it correctly; however, I can't find any good examples of nested tags.

For example: <parent-tag parent-attribute="parent"> <child-tag child-attribute="child1"/> <child-tag>child2</child-tag> </parent-tag> I can get parent-attribute using 'accessors,' but how do I get child-attribute or value of the second child-tag?

I've seen a couple of hints that inside lifecycle of child nodes, I should reference parent nodes. However, how does that work when a set of tag hierarchy works together to create a result:

<chart-tag width="300", height="300"> <chart-x-axis isVisible="false"/> <chart-y-axis min="0" max="100"/> <chart-legend> this is the legend</chart-legend> </chart-tag>

In order to convert this made-up tag soup into a chart, I need to get all values from all nodes. Do I have to start traversing parent/sibling nodes myself?

Answer 1

I've been able to solve this, although I'm not certain if this is the best way.

In the parent tag, by the time 'inserted' lifecycle is called, all child nodes have been parsed and can be accessed by

xtag.queryChildren(this,'child-node-tag');

Reference to child nodes can be used to traverse its attributes: childnode.attribute1

Note that child tags must also be registered, although there doesn't seem to be a need to 'link' parent and child tags in any direct way. A very simple example is available at https://github.com/falconair/dimple-chart/blob/master/dimple-chart-test.htm (take a look at the code early in the version history, don't know how it will evolve over time).