Version

3.2.32

Reproduction link

codepen.io

Steps to reproduce

• Define a Web Component : customElements.define
• Mount a vue app on a parent element of Web Component

Ex :

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <custom-foo>
    <div class="foo"></div>
  </custom-foo>
</div>

class CustomFoo extends HTMLElement {
  constructor() {
    super()
    this.foo = this.querySelector('.foo')
  }
  
  connectedCallback() {
    console.log('<CustomFoo> mounted.')
    console.log('Foo = ', this.foo)
  }
}

customElements.define('custom-foo', CustomFoo);

const app = Vue.createApp()
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')

console.log('Vue.js mounted')
app.mount("#app");

Result :

What is expected?

Web component is mounted once

What is actually happening?

Web component is mounted two times

PS : define web-component after vue app was mounted solve the problem.

That expected. The content of the #app element is used as a template for the Vue app you mount, and in the process, the content of #app will be replaced.