如何在自定义元素*及其子元素*已初始化时获取回调答案

【问题标题】：How to get a callback when a custom element *and it's children* have been initialized如何在自定义元素*及其子元素*已初始化时获取回调
【发布时间】：2016-03-23 19:37:45
【问题描述】：

我正在嵌套自定义元素。我想让我的父自定义元素使用其子自定义元素原型中的方法和属性。例如

<script>      
var ChildElement = Object.create(HTMLElement.prototype);

ChildElement.getName = function () {
  return "Bob";
}

document.registerElement("child-element", { 
  prototype: ChildElement
});

var ParentElement = Object.create(HTMLElement.prototype);

ParentElement.createdCallback = function () {
  var self = this;
  setTimeout(function () {
    // This logs 'Bob', correctly
    console.log(self.childNodes[0].getName());  
  }, 0);

  // This explodes - getName is not defined.
  console.log(self.childNodes[0].getName());
};

document.registerElement("parent-element", { 
  prototype: ParentElement
});
</script>

<parent-element><child-element></child-element></parent-element>

如内联所述，父级无法读取在子级元素原型上定义的任何内容。如果它立即触发 setTimeout 则可以；它只需要等到该元素的子节点也已设置完毕。

这似乎是因为元素创建期间的回调顺序，我认为是这样的：

设置了父级的原型（从 HTMLElement 到 ParentElement）
调用父级的createdCallback
父级的attachedCallback被调用
设置了孩子的原型（从 HTMLElement 到 ChildElement）
孩子的 createdCallback 被调用
孩子的 attachCallback 被调用

此时 createdCallback 触发是有道理的，但据我所知，当您的所有孩子都已创建时，根本没有可用的回调。我认为这意味着如果不使用 setTimeout 等待整个页面完成渲染，就不可能在创建时使用子元素的原型做任何事情。

是否有任何可以从父节点监听的回调或事件，只有在所有子节点的原型也已设置后才触发？是否有不同的方法可以让您使用这样的结构？除了触发 setTimeout 之外，您还能做什么？

我认为自定义元素旨在允许与其他元素内容进行参数化，并且在该内容中有效地不支持自定义元素是相当令人惊讶的。

可以说这可以被认为是Prototype not defined when accessing children on creation of custom-tag 的复制品。然而，这个问题措辞不佳，示例不完整，唯一的答案似乎实际上是一个实现错误，而不是解决方案（或者至少，它不再是当前的浏览器行为）

【问题讨论】：

标签： html prototype custom-element

【解决方案1】：

实际上，使用嵌套的自定义元素有很多不同的方法来实现这一点。

直接的方法是向父元素添加自定义回调，子元素将通过其attachedCallback 方法调用该回调：

ParentElement.childAttachedCallback = function ()
{
    console.log( this.childNodes[0].getName() )
}

ChildElement.attachedCallback = function()
{
    this.parentElement.childAttachedCallback()
}

在复杂的场景中，您可以改用：

Promise 对象由父级设置并由一个或多个子级解析，
由子级触发并由父级捕获的自定义事件，
一个MutationObserver对象集来观察父子列表的变化...

【讨论】：