❓ What is correct way to get parent

[jd-solanki]

Playground

In above playground, If you check the console we are getting second log as .btn-content because in DOM tooltip's parent element is .btn-content.

I wanted to know, as that is part of Vue component Button can we get that component's root button as parent by something? (Maybe if we can identify if parent is vue component then we can use vm.proxy.$parent.$el )

Current State:

1. For wrapper => .wrapper ✅
2. For button => .btn-content ❌ (How to get button here?)
3. For p tag => p ✅

Why?

For components like tooltip, we need to get the root parent for the component and actual element for normal HTML element.

---

Edit 1

Updated playground according to @chenxch's answer. Old Playground

[chenxch]

// parent component
vm.parent
// parent component html
vm.parent.vnode.el

[chenxch]

demo

By comparing vm.vnode.ctx and vm.vnode.el.parentElement.__vnode.ctx

[jd-solanki]

That's out of my mind 🤯

You must have really solid insights of vue 🤩

Your new example did work and is totally fine. Just one question:

Using vm!.vnode.ctx give type error:

Property 'ctx' does not exist on type 'VNode<RendererNode, RendererElement, { [key: string]: any; }>'.

Do you have any idea?

[jd-solanki]

Moreover, we also get error in production

[jd-solanki]

Oh, sorry for the confusion if I created any. Upon inspection, I found that in production vm!.vnode.el!.parentElement.__vnode gives undefined, and hence we get the above error.

vm!.vnode.ctx seems fine, it just gives above mentioned type error.

I guess, We get undefined vm!.vnode.el!.parentElement.__vnode because __vnode might be denoted as private or "not to use" thing because it is dev env only thing 🤔

[jd-solanki]

Hi, @chenxch Thanks so much for your efforts and time. I really appreciate your help 🙏🏻

As per the @liulinboyi it looks like there's no way to satisfy the mentioned requirement in the question hence closing this.

Best regards 😇

[liulinboyi]

Waht's you get parent mean? get parent Component? or get parent element Node? When you want find the parent you should know what you mean, and what parent you want get. As far as I know there may not have a common method to both get the Component parent and element Node parent. You may use diffrent way to get Component parent or element Node parent.
About how to get Component parent and element Node parent, the @chenxch has answered.

[jd-solanki]

Thanks for your response, I wanted to know that is there any way we can get the parent element with condition like if the parent element is part of vue component (e.g. .btn-content is part of Button component) then return the root element for that component (Button instead of .btn-content) or if the parent element is a normal HTML element (like p) then just return that.

According to your answer, it looks like there's no way to get this.

Thanks for the clarification.

[liulinboyi]

Thanks for your response, I wanted to know that is there any way we can get the parent element with condition like if the parent element is part of vue component (e.g. .btn-content is part of Button component) then return the root element for that component (Button instead of .btn-content) or if the parent element is a normal HTML element (like p) then just return that.

According to your answer, it looks like there's no way to get this.

Thanks for the clarification.

Need for specific problem analysis.