在创建自定义标签时访问儿童时未定义原型 [英] Prototype not defined when accessing children on creation of custom-tag

问题描述

__我正在尝试做什么____

现在我正在使用自定义HTML5标记。我试图创建一个易于设置的制表符控制元素。为此，我创建了一个名为' tab-set '的父元素，它与' ul '标签非常相似。

要插入标签，只需插入' tab-element '标签（如' li '标签）即可。标签可以通过自定义原型来实现自己的行为，这些自定义原型扩展了标准化的元素原型，比如基本的HTMLElement，然后用'document.registerElement（）'注册。此时，还有机会设置回调，让你知道什么时候你的元素已经创建或附加到某个东西上，这就是我用来做一些必要的计算，以便将各个标签放置在标签控件上。 p>

让我先说，我一开始就遇到过这个问题，然后才开始工作，但一旦重写，整个事情再次出现问题，因为谁知道为什么。

因此，在选项卡的创建例程中，我遍历所有的子选项卡元素，调用它们的自定义函数setDimension '，或者至少我在努力。由于某些原因，Chrome在我的标签集上调用了' createdCallback '和' attachedCallback '之前，不会初始化制表符元素原型（setDimension等）。这意味着我无法调用子元素自定义函数来设置它在创建选项卡集时的位置。

---

这里有一些代码示例我刚刚描述过的。

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（）{
（/ ** ** /）** 
 listOfChildren [index] .setDimensions（/ ** placement info ** / ）; 
 
 // 
 // Chrome控制台：'setDimensions'不是一个功能！ 
 // 
} 
 
 tabElement = Object.create（HTMLDivElement.prototype）; 
 
 tabElement.setDimensions = function（/ ** placement info ** /）{
 $（this）.css（...）; 
} 
 
 document.registerElement（'tab-set'，tabSet）; 
 document.registerElement（'tab-element'，tabElement）; 
 ... 
  

奇怪的是我有这个工作版本，是的，我试图模拟它的特定条件，例如通过jquery的.load（）例程加载html部分。但是无论我做什么，我都无法在我目前的脚本中使用它。我缺少什么知识？

预先感谢您的帮助。

解决方案

__已解决__

是在标签集内添加一个链接标签，并使标签元素加载它包含style-class。我想让tab元素有一个css类会以某种方式激发Chrome加载他们的原型'过早地'。

__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.

解决方案

__ 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'.

这篇关于在创建自定义标签时访问儿童时未定义原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！