Search code examples
javascriptangulartypescriptvue.jsweb-component

Detect mounting of web-component in DOM

I read this thread created web-component:

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

It works fine in Angular. How can I detect when web component was mounted in DOM?

In this code I get null:

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

In this code I get my component, but I should wait 0.5 sec:

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

Is there any tool (event) to detect mounting of web-component in DOM ?

Solution

  • Need to add connectedCallback() from the docs:

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