javascript - 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() 似乎在元素呈现在屏幕上之前运行。如果我设置一个仅 1 毫秒的计时器，我就会获得所需的位置数据。

是否有原生的 afterRender() 或者更适合我使用的东西？我目前的方法是人眼无法察觉的，但依赖于CPU能力，延长定时器就会让人注意到。

Answer 1

回答我自己:这在逻辑上是不可能的，因为定位上下文菜单的内联CSS只是稍后添加的。因此，就我而言，正确的解决方案是监听“样式”属性的更改。