CSS 渲染后的自定义元素中是否有回调？

Question

这是我的自定义元素。

class ContextMenu extends HTMLElement {
    constructor() {
        super()
    }

    connectedCallback() {
        console.log(this.getBoundingClientRect()) // empty
        console.log(this.offsetWidth) // 0
        console.log(this.offsetHeight) // 0

        setTimeout(() => {
          console.log(this.getBoundingClientRect()) // good
          console.log(this.offsetWidth) // good
          console.log(this.offsetHeight) // good
        }, 1)
    }
}

document.customElements.define('context-menu', ContextMenu)

这是一个右键单击时出现的上下文菜单。我的目标是立即检查上下文菜单是否太高或太宽而无法在用户右键单击的位置显示，如果是，我会相应地进行调整。

我的问题是connectedCallback() 似乎在元素呈现在屏幕上之前运行。如果我设置一个只有 1ms 的计时器，我就会得到我需要的位置数据。

有没有原生的afterRender() 或更适合我使用的东西？我目前的方法是肉眼无法检测到的，但依赖于 CPU 功率，延长计时器会使其明显。

Answer 1

回答我自己：这在逻辑上是不可能的，因为定位上下文菜单的内联 CSS 只是稍后添加的。所以在我的情况下，正确的解决方案是监听“样式”属性的变化。