Html 当自定义元素*及其'；的子项*已初始化

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

var ChildElement=Object.create（HTMLElement.prototype）；
ChildElement.getName=函数（）{
返回“Bob”；
}
document.registerElement（“子元素”{
原型：ChildElement
});
var ParentElement=Object.create（HTMLElement.prototype）；
ParentElement.createdCallback=函数（）{
var self=这个；
setTimeout（函数（）{
//这会正确记录“Bob”
console.log（self.childNodes[0].getName（））；
}, 0);
//这将分解-未定义getName。
console.log（self.childNodes[0].getName（））；
};
document.registerElement（“父元素”{
原型：ParentElement
});

如内联所述，父元素无法读取在子元素的原型上定义的任何内容。如果它触发一个立即setTimeout，那么它可以；它只需要等待该元素的子节点也被设置好

出现这种情况的原因似乎是元素创建期间的回调顺序，我认为如下所示：

• 父对象的原型已设置（从HtmleElement到ParentElement）
• 调用父级的createdCallback
• 调用父级的attachedCallback
• 子对象的原型已设置（从HtmleElement到ChildElement）
• 将调用子级的createdCallback
• 孩子的attachedCallback被称为

createdCallback在这一点上触发是有道理的，但据我所知，当您的所有子项都被创建时，根本没有可用的回调。我认为这意味着，如果不使用setTimeout等待整个页面完成渲染，就不可能在使用子元素原型的创建上执行任何操作

是否有任何回调或事件可以从父节点侦听，以便仅在设置了所有子节点的原型后触发？是否有一种不同的方法允许您使用这样的结构？除了触发setTimeout，您还可以做什么

我相信自定义元素的设计是为了允许其他元素内容的参数化，而在该内容中没有有效支持自定义元素是非常令人惊讶的

---

可以说，这可以被认为是一个复制品。然而，这个问题措词不当，示例不完整，唯一的答案似乎实际上是一个实现错误，而不是解决方案（或者至少不再是当前的浏览器行为）

事实上，有许多不同的方法可以通过嵌套的自定义元素实现这一点

直接方法是向父元素添加自定义回调，子元素将从其

attachedCallback

方法调用该回调：

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

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

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

• 父级设置并由一个或多个子级解析的

  Promise

  对象
• 由孩子激发并由家长捕获的自定义事件
• 一个

  MutationObserver

  对象集，用于观察父对象的子列表中的更改