Vue 3 Custom Element, Cannot access method from vannilla js

Question

I have a custom element <ts-app> created with vue 3.

Emitted event works fine but I cannot figure out how to call method from vanilla js.

       customElements.whenDefined("ts-app").then((app) => {
            const el = document.querySelector("ts-app");

            // I want to call open inside webcomponent here 
            // tried el.open(), el.shadowRoot.open() both returns open is not defined
            

            el.addEventListener("updated", function (e) {
                //this is working fine
                console.log(e);
            });
        });

Inside the component I have

methods: {
        open() {
            console.log('Open Called')
        },
}

Possible duplicate of stackoverflow.com/questions/71198220/… — Estus Flask
– Estus Flask, Commented May 31, 2023 at 15:26

Nikola Pavicevic · Accepted Answer · 2023-05-31 15:27:01Z

0

You can create prop:

const props = defineProps({
  isOpened: {
    type: Boolean,
    default: false,
  },
})

and watch that prop:

watch(
  () => props.isOpened,
  (newValue) => {
    // open functionality here ;
  }
);

and from vanilla js set that prop:

el.setAttribute('is-opened', true)

answered May 31, 2023 at 15:27

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

themightysapien Over a year ago

This is hacky and doing this for all public methods will be very tedious. Searching online shows it can be done directly with el.open() but in case of vue generated why is is not possible ?

Collectives™ on Stack Overflow

Vue 3 Custom Element, Cannot access method from vannilla js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related