javascript - 检测 DOM 中 Web 组件的安装

Question

我读到了 thread 创建的 Web 组件:

<my-vue-web-comp [userId]="1" id="my-component"></my-vue-web-comp>

它在 Angular 中运行良好。如何检测 Web 组件何时挂载到 DOM 中？

在此代码中我得到 null:

ngAfterViewInit() {
  const myComponent = document.getElementById('my-component')
  console.log(myComponent) //null
}

在这段代码中我得到了我的组件，但我应该等待 0.5 秒:

ngAfterViewInit() {
        setTimeout(
            function() {
                const myComponent = document.getElementById('my-component')
                console.log(myComponent) //not null                
            }, 500)
    }

是否有任何工具(事件)可以检测 DOM 中 Web 组件的安装？

Answer 1

需要从docs添加connectedCallback() :

Vue.customElement('web-component', (MyWebComponent as any).options, { connectedCallback() {
      console.info('connectedCallback', this)
    }})