在创建自定义标签时访问子项时未定义原型答案

【问题标题】：Prototype not defined when accessing children on creation of custom-tag在创建自定义标签时访问子项时未定义原型
【发布时间】：2014-09-03 05:43:45
【问题描述】：

我要做什么__

现在我正在使用自定义 HTML5 标签。我正在尝试创建一个易于设置的选项卡控制元素。为此，我创建了一个名为“tab-set”的父元素，其工作方式与“ul”标签非常相似。

要插入标签，您只需插入“tab-element”标签（如“li”标签）。标签可以通过自定义原型来实现自己的行为，这些原型扩展了诸如基本 HTMLElement 之类的标准化元素原型，然后使用 'document.registerElement()' 进行注册。在这一点上，还有机会设置回调，让您知道您的元素何时被创建或附加到某物，这是我用来对选项卡控件上各个选项卡的位置进行必要计算的方法。

让我先说一下，我一开始遇到了麻烦，然后让它工作了，但是在重写整个事情时又遇到了麻烦，不知道为什么。

因此，在选项卡集的创建例程中，我遍历所有子选项卡元素，调用它们的自定义函数“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(){
 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);
...

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

提前感谢您的帮助。

【问题讨论】：

你有一个工作版本，但当前脚本不能工作？！那么你发布了哪个版本的代码？它们有何不同？到底是什么问题，你有什么错误吗？
我已经“解决”了这个问题。在旧版本中，选项卡元素在其属性中指定了一个 css 类。这不知何故让 Chrome 在调用 tab-set 上的 createdCallback 之前加载它们。

标签： javascript html google-chrome web-component custom-tags

【解决方案1】：

解决了

我所要做的就是在选项卡集中添加一个链接标记并让选项卡元素加载它包含样式类。我猜想让选项卡元素有一个 css 类会以某种方式促使 Chrome '过早'加载他们的原型。

【讨论】：

__我要做什么____

__ 解决了 __

我要做什么__

解决了