1

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')
        },
}
themightysapien
  • 8,309
  • 2
  • 17
  • 15

1 Answers1

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)
Nikola Pavicevic
  • 21,952
  • 9
  • 25
  • 46
  • 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 ? – themightysapien May 31 '23 at 17:46