Javascript 初始槽分配后，如何对第一次喷漆/布局作出反应

我有一个自定义元素，

myel

，它在其DOM模板（阴影根）中包含一个

slot

元素。在网页中，我使用

我的el

，方法是在标签之间放置额外的元素

，如下所示

<my-el>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</my-el>

问题

---

在

我的el

中的

插槽中分发后，如何在第一次呈现测量值时触发测量值？
您可以在自定义元素中定义一个变量，该变量将在第一次呈现元素时设置（在
connectedCallback
中或在
slotchange
事件中）

然后检查变量值以确定它是否是第一次渲染


customElements.define（'c-e'，类扩展了HtmleElement
{
connectedCallback（）
{
var sh=this.attachShadow（{mode:'open'}）
sh.appendChild（T1.content.cloneNode（true））
sh.querySelector（'button'）。onclick=ev=>
this.appendChild（document.createElement（'div'））.innerHTML='new div'
sh.querySelector（'slot'）.addEventListener（'slotchange'，ev=>
！len&&（len=this.render（））
var len=this.render（）
}
渲染（）
{
var count=this.querySelectorAll（'div'）.length
如果（计数）
console.info（“%s元素。第一次呈现在%s”中，计数，this.id）
返回计数
}
}）

第一组
第2组
：主持人{
显示：内联flex；
弯曲方向：立柱；
宽度：150px；
边框：1px纯色浅蓝色；
最小高度：4em；
保证金：5px；
背景：#f7f7f7；
}
添加div
这并不能完全回答问题，但很接近。我正在寻找能够保证元素在DOM中呈现的点。在您的示例中，在
connectedCallback
中进行测量是可行的，但这是一个简单的示例吗？换句话说，我们如何保证渲染？（注意，“保证渲染”并不意味着“强制渲染”）渲染是同步的，所以我看不出重点。也许您应该给出一个具体的例子，在connectedCallback中不能保证渲染。不同的用例已经被讨论过了（，），我已经很好地查看了链接中的问题。我还做了一个更全面的小提琴实验。看起来它确实是同步的，所以只要在将模板注入DOM之后进行测量，测量就应该得到保证？我用它来设计我的组件和应用程序，它们的元素渲染生命周期更复杂。我希望这是一种平台技术，而不是框架架构带来的效果。因此，这一个如果到了框架API！谢谢你的帮助！
connectedCallback() {
  super.connectedCallback();

  requestAnimationFrame(() => {
    // Measure chilren
  });
}