Vue JS via CDN - why does adding a component replace the entire template?-CodePudding

I'm making a vue js app using the CDN like this:

        <div id="bookingApp">
            <select-service />
            <div>
                Hello there
            </div>
        </div>

... and in js ...

const SelectService = {
    template: '<h1>In Here!!</h1>',
    setup() {

    }
}

const bookingApp = Vue.createApp({
    components: { "select-service": SelectService },
    data() {
        return {
            sid: -1,
            rid: -1
        }
    }
});

bookingApp.mount('#bookingApp');

... However, in #bookingApp it only shows "In Here!!" and not "Hello there" below it.

If I remove the then it shows "Hello there" as expected.

Why is it that I can't have component and still show the Hello there as well?

CodePudding user response：

You should not use self-closing tags for Vue components in DOM templates as HTML only allows self closing for well known types like <input> and <img>.

For more details see the documentation: https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats