defineCustomElement() 定义自定义元素

最后更新：2026-10-22

defineCustomElement() 把 Vue 组件包装成标准 Web Component：可在任何框架/原生页面里用标签消费。

📝 语法

const MyEl = defineCustomElement({ props: { msg: String }, template: "<p>{{ msg }}</p>" })
customElements.define("my-element", MyEl)

options	组件定义（可含 styles 数组注入样式）

返回值：自定义元素类（交给 customElements.define 注册）

修改下面的代码，在预览区实时查看效果：

输出：

渲染出「来自自定义元素」。

ℹ️ 说明 跨技术栈复用组件时有用：设计系统可同时服务 Vue/React/原生页面。

💡 提示 styles 选项给 shadow DOM 注入样式，封装性更强。

⚠️ 注意 自定义元素用浏览器原生事件与属性协议：props 需要显式声明才能在元素上设置。

更多案例即将上线。

Q 什么时候需要它？

A 需要在非 Vue 项目里复用组件，或按平台规范提供 Web Component。

Q 样式会污染页面吗？

A 用 shadow DOM（styles 选项）可隔离；否则样式全局生效。

Q 能用在 Vue 内部吗？

A 可以，但普通场景直接用组件即可，无需绕一圈自定义元素。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。