Prototype not defined when accessing children on creation of custom-tag

问题

What I am trying todo__

Right now I am working with custom HTML5 tags. I am trying to create a tab-control element that is easy to set up. Todo this I create a parent element called 'tab-set' which works much like the 'ul' tag.

To insert tabs, you simply insert 'tab-element' tags (like 'li' tags). The tags can implement own behavior through custom prototypes which extend standardized element-prototypes such as the basic HTMLElement and are then registered with 'document.registerElement()'. At that point there are also opportunities to set callbacks that let you know whenever your element has been created or attached to something, which is what I use to do the necessary calculations on the placement of the individual tabs on the tab-control.

Let me say up-front that I've had trouble with this at first, then got it working, but upon rewriting the whole thing had troubles again for who knows why.

So, in the creation routine of the tab-set I iterate through all the child-tab-elements, calling their custom function 'setDimension', or atleast I am trying to. For some reason Chrome won't initialize the tab-element prototype (setDimension etc) before it has called both 'createdCallback' and 'attachedCallback' on my tab-set. This means that I can't call the child elements custom functions to set it's placement on creation of the tab-set.

Here you have some code samples of what I just described.

simple.html

...
<tab-set>
 <tab-element>
  <img>guybrush</img>
 </tab-element>
 <tab-element>
  <img>le chuck</img>
 </tab-element>
</tab-set>
...

tabs.js

...
tabSet = Object.create(HTMLDivElement.prototype);

tabSet.attachedCallback = function(){
 for(/** calculations here **/) 
  listOfChildren[index].setDimensions(/** placement info **/);

  //
  // Chrome console: 'setDimensions' is not a function!
  //
}

tabElement = Object.create(HTMLDivElement.prototype);

tabElement.setDimensions = function(/** placement info **/){
 $(this).css(...);
}

document.registerElement('tab-set',tabSet);
document.registerElement('tab-element',tabElement);
...

The weird thing is that I have a working version of this, and yes, I have tried to emulate it's particular conditions such as for example loading the html-portion through jquery's .load() routine. But no matter what I do, I can not get this to work in my current script. What knowledge am I missing?

Thanks in advance for any help.

回答1:

Solved

All I had todo was add a link-tag inside the tab-set and have the tab-elements load it's containing style-class. I guess making the tab-elements have a css-class is somehow provoking Chrome to load their prototypes 'prematurely'.

来源：https://stackoverflow.com/questions/24717376/prototype-not-defined-when-accessing-children-on-creation-of-custom-tag

标签

javascript