How to access a components $el.innerHTML in Vue 3?

Question

In Vue 2 it was possible to access the innerHTML of a Vue component instance via someInstance.$el.innerHTML. How can the same be achieved in Vue 3?

Answer 1

Let's say you want to to create a Vue component and access its innerHTML. In Vue 2, this could be done like so:

const wrapper = document.createElement('div');
const someComponentInstance = new Vue({
    render: h => h(SomeComponent, {
        props: {
           someProp: 'prop-value-123'
        }
    })
});
someComponentInstance.$mount(wrapper);
console.log(someComponentInstance.$el.innerHTML);

To achieve the same thing in Vue 3, we have to leverage the createApp() and mount() functions like so:

const wrapper = document.createElement('div');
const someComponentInstance = createApp(SomeComponent, {
    someProp: 'prop-value-123'
});
const mounted = someComponentInstance.mount(wrapper); // returns an instance containing `$el.innerHTML`
console.log(mounted.$el.innerHTML);

A word of warning: Make sure your innerHTML is sanitized if it is user generated and you want to reuse it somewhere in your app.