Methods exposed with defineExpose are not available on custom element

[mgibas]

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Open repro and you should see 'hello' in the console instead of Uncaught TypeError: ce.value.hello is not a function

What is expected?

Methods exposed with defineExpose are available on given component instance

What is actually happening?

They are not exposed

[LinusBorg]

Is there anything in the docs for defineCusromElement giving you the impression that they should be?

I don't think we planned for that, it's simply not supported. We don't expose anything about the component on the custom element wrapper except its props.

[mgibas]

I was just following this documentation and assumed that if defineExpose default behavior is not documented there us not supported (like slots) it means that this is a bug. Which also makes sense when properties are exposed.

Either way if it's like a triage issue how can we turn this into feature?

[hcg1023]

I think it's useful for expose to allow certain things to be exposed, such as' input.click() ', which I currently handle with object.defineProperty

[m-ghaoui]

I too have this problem but I got to say that it's not consistent. Some components work and other don't. I can't put a finger on a reason why. They all use defineExpose normally.

It seems to affect components that are conditionally rendered via a v-if but the stackblitz example does not do this, so I have no clue why this is happening.

[m-ghaoui]

Why is his marked as as feature request? This is most definitely a bug. Right now we work around it by defining a useless property and listen to it in order to trigger the method that does not get exposed.

I stand corrected. See below.

[mgibas]

@m-ghaoui even though I created this issue I can see how this is simply a new feature :)

for time being I use this composable to get to the host:

import { getCurrentInstance, ref, onMounted } from 'vue'

export function useHost() {
  const host = ref(null)
  onMounted(() => {
    host.value = getCurrentInstance()?.proxy?.$el?.parentNode?.host
  })
  return host
}

and inside your custom element you can expose your method with simple assignment:

function foo () { … }
host.value.foo = foo

[m-ghaoui]

Oh I get it now. defineExpose() only exposes properties. Exposing a method is a new feature.

Okay 🙂 I stand corrected.

[hcg1023]

I created a PR @LinusBorg #6256

[j4hangir]

I too have this problem but I got to say that it's not consistent. Some components work and other don't. I can't put a finger on a reason why. They all use defineExpose normally.

It seems to affect components that are conditionally rendered via a v-if but the stackblitz example does not do this, so I have no clue why this is happening.

I confirm, it's been bugging me that why it works on one Component and not another.

[rdsteiner]

Are there any plans on adding this new feature? The PR from @LinusBorg is getting pretty old.

[itwondersteam]

facing the same issue, temporary workaround to access the exposed method via $.exposed, e.g.

const myRef = ref()
// <myElement ref="myRef"></myElement>

myRef.value.$.exposed.ExposedMethod()

[padcom]

Any progress on that over-a-year-old shortcoming of Vue's implementation of webcomponents? Is that ever going to land in Vue or should we just create and use a fork to get it implemented?

[shery]

myRef.value.$.exposed.ExposedMethod()

Worked for me

[zzw105]

I cannot obtain exposed in $, but I obtained exposed in _instance

myComponent.value._instance.exposed.xxx()

vue2 and vue3 can be obtained through _instance

[yyx990803]

closed via #6256