Vue 3 Composition API - How to get the component element ($el) on which component is mounted

tl;dr:

In Vue 3, components are no longer limited at only 1 root element. Implicitly, this means you no longer have an $el.
You have to use ref to interact with any element in your template.

As pointed out by @AndrewSee in comments, when using a render function (not a template), you can specify the desired ref in createElement options:

render: function (createElement) {  return createElement('div', { ref: 'root' })}// or, in short form:render: h => h('div', { ref: 'root' })

initial answer:

As outlined in docs,

[...] the concepts of reactive refs and template refs are unified in Vue 3.

And you also have an example on how to ref a "root" element. Obviously, you don't need to name it root. Name it $el, if you prefer. However, doing so doesn't mean it will be available as this.$el, but as this.$refs.$el.

<template>  <div ref="root"></div></template><script>  import { ref, onMounted } from 'vue'  export default {    setup() {      const root = ref(null)      onMounted(() => {        // the DOM element will be assigned to the ref after initial render        console.log(root.value) // this is your $el      })      return {        root      }    }  }</script>

In Vue 3 you're no longer limited to only one root element in <template>, so you have to specifically reference any element you want to interact with.

You actually can use $el on Vue 3 Composition API. It's not recommended though.

import { getCurrentInstance } from 'vue';const el = getCurrentInstance().ctx.$el;

This seems to have the complete functionality of $el on Vue 2. The problem with a DOM ref is, it's not exactly similar to $el.