Vue · Senior · Question 34 of 75

How do you expose a Vue component as a native Custom Element?

const MyWidget = defineCustomElement(Widget);
customElements.define("my-widget", MyWidget);

✓Correct answer: With defineCustomElement, so it can be used in any page or framework
2With app.mount('my-widget')
3Vue components can't be custom elements

Explanation

Styles are injected into the shadow root. Props map to attributes/properties and emitted events become CustomEvents. Useful for embeddable widgets.

Further reading

Vue and Web Components ↗

Test yourself

Take the Vue · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.