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)