defineCustomElement() Define a Custom Element
Last updated: 2026-10-22
defineCustomElement() Define a Custom Element
defineCustomElement() wraps a Vue component as a standards-based custom element usable in any page or framework.
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Global |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const MyEl = defineCustomElement({ props: { msg: String }, template: "<p>{{ msg }}</p>" })
customElements.define("my-element", MyEl)⚙️ Arguments
| options | A component definition (styles array supported) |
|---|
Returns：A custom element class for customElements.define
▶ Example
Edit the code below and see the live result:
Output：
Renders 'from a custom element'.💡 Key Points
ℹ️ Note Great for sharing design-system components across frameworks.
💡 Tip The styles option injects CSS into the shadow root.
⚠️ Warning Props must be declared to be settable as element properties.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q When is it useful?
A When reusing components outside Vue or shipping web components.
Q Does styling leak?
A Shadow DOM isolates styles; otherwise they are global.
Q Usable inside Vue too?
A Possible, though plain components are simpler.
