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仅在以后添加。因此，对我而言，正确的解决方案是侦听“样式”属性的更改。