defineCustomElement()
该方法接受和defineComponent
相同的参数,但是返回一个原生的自定义元素,该元素可以用于任意框架或不基于框架使用。
类型
function defineCustomElement( component: | (ComponentOptions & { styles?: string[] }) | ComponentOptions['setup'] ): { new (props?: object): HTMLElement }
细节
除了普通的组件选项外,defineCustomElement()
还支持一个特殊的选项styles
,它应该是一个内联的 CSS 字符串数组,用于提供应该注入元素阴影根的 CSS。
返回值是一个自定义元素构造函数,可以使用customElements.define()
例子
import { defineCustomElement } from 'vue' const MyVueElement = defineCustomElement({ /* component options */ }) // Register the custom element. customElements.define('my-vue-element', MyVueElement)