Version

3.0.0

Reproduction link

https://codepen.io/hyjiacan/pen/ZEppqay

Steps to reproduce

Just open the DevTools Window to see the output.

What is expected?

The value of this.$el to be the actual element p#content

What is actually happening?

Got <!--teleport start--> instead

The <teleport> will render <!--teleport start--> & <!--teleport end--> in dom to mark which doms need to teleport.
As I see, The root element is containing a <teleport>, so this.$el must be the <teleport> rendered product.

The <teleport> will render <!--teleport start--> & <!--teleport end--> in dom to mark which doms need to teleport. As I see, The root element is containing a <teleport>, so this.$el must be the <teleport> rendered product.

Is there any suggestion to get the div#content without ref ?

document.getElementById

As a workaround, you can use a custom directive to get the element of the inner vNode (you need to write render function if it is a slot).

// using render function
import { withDirectives, h, Teleport } from 'vue'

const dir = {
  mounted (el) {
    console.log(el)
  },
  updated (el) {
    console.log(el)
  }
}

export default {
  render () {
    const firstSlotVNode = this.$slots.default()[0]
    return h(Teleport, null, [
      withDirectives(
        firstSlotVNode,
        [[dir]]
      )
    ])
  }
}

Closing as this is working as intended

As a workaround, you can use a custom directive to get the element of the inner vNode (you need to write render function if it is a slot).

// using render function
import { withDirectives, h, Teleport } from 'vue'

const dir = {
  mounted (el) {
    console.log(el)
  },
  updated (el) {
    console.log(el)
  }
}

export default {
  render () {
    const firstSlotVNode = this.$slots.default()[0]
    return h(Teleport, null, [
      withDirectives(
        firstSlotVNode,
        [[dir]]
      )
    ])
  }
}

can't saw your image

As a workaround, you can use a custom directive to get the element of the inner vNode (you need to write render function if it is a slot).

// using render function
import { withDirectives, h, Teleport } from 'vue'

const dir = {
  mounted (el) {
    console.log(el)
  },
  updated (el) {
    console.log(el)
  }
}

export default {
  render () {
    const firstSlotVNode = this.$slots.default()[0]
    return h(Teleport, null, [
      withDirectives(
        firstSlotVNode,
        [[dir]]
      )
    ])
  }
}

can't saw your image

i don't have to use render function. do you have another methods ?