A prototype not defined when accessing children when creating a custom tag

Question

__ What I'm trying to do ____

I am currently working with custom HTML5 tags. I am trying to create a tab control that is easy to customize. In this case, I create a parent called tab-set, which is very similar to the ul tag.

To insert tabs, you simply insert tab-element tags (for example, li tags). Tags can implement their own behavior through custom prototypes that extend standardized element prototypes, such as the base HTMLElement, and then register with document.registerElement (). At this point, there is also the opportunity to set callbacks that tell you when your item was created or tied to something that I use to perform the necessary calculations when placing individual tabs in a tab control.

Let me say that at first I had problems with this, then I started working, but after rewriting it all, problems again, who knows why.

So, in the procedure for creating a tab set, I repeat all the child tabs, calling their custom function 'setDimension', or at least trying. For some reason, Chrome will not initialize the prototype tab-element (setDimension, etc.) before it calls both "createdCallback" and "attachCallback" on my tab. This means that I cannot call custom functions of children to set its placement when creating a tab set.

---

Here you have code examples 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 strange thing is that I have a working version of this, and yes, I tried to imitate certain conditions, such as, for example, loading the html part via jquery.load (). But no matter what I do, I cannot get this to work in my current script. What knowledge do I lack?

Thanks in advance for your help.

Answer 1

__ Solved __

All I had was adding a link tag inside a set of tabs and loading tab-elements with a style class. I assume that the tab-elements have a css class, as this causes Chrome to load their prototypes “prematurely”.