自定义元素 API ​

defineCustomElement() ​

此方法接受与 defineComponent 相同的参数，但返回一个原生的 自定义元素 类构造函数。

• 类型

  ts

  function defineCustomElement(
    component:
      | (ComponentOptions & CustomElementsOptions)
      | ComponentOptions['setup'],
    options?: CustomElementsOptions
  ): {
    new (props?: object): HTMLElement
  }
  
  interface CustomElementsOptions {
    styles?: string[]
  
    // the following options are 3.5+
    configureApp?: (app: App) => void
    shadowRoot?: boolean
    nonce?: string
  }

  类型已简化以提高可读性。

• 详情

  除了正常的组件选项外，defineCustomElement() 还支持一些特定于自定义元素的选项

  • styles：一组内联 CSS 字符串数组，用于提供应注入元素影子的 CSS。

  • configureApp ：一个函数，可用于为自定义元素配置 Vue 应用程序实例。

  • shadowRoot ：布尔值，默认为 true。设置为 false 以在没有影子根的情况下渲染自定义元素。这意味着自定义元素 SFC 中的 <style> 将不再被封装。

  • nonce ：string，如果提供，将被设置为注入到影子根中的样式标签的nonce属性。

  注意，这些选项不仅可以作为组件的一部分传递，还可以通过第二个参数传递。

  js

  import Element from './MyElement.ce.vue'
  
  defineCustomElement(Element, {
    configureApp(app) {
      // ...
    }
  })

  返回值是一个自定义元素构造函数，可以使用customElements.define()进行注册。

• 示例

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* component options */
  })
  
  // Register the custom element.
  customElements.define('my-vue-element', MyVueElement)

• 另请参阅

  • 指南 - 使用Vue构建自定义元素

  • 此外，请注意，当与单文件组件一起使用时，defineCustomElement()需要特殊配置。

useHost() ​

一个组合式API助手，返回当前Vue自定义元素的宿主元素。

useShadowRoot() ​

一个组合式API助手，返回当前Vue自定义元素的影子根。

this.$host ​

一个选项API属性，用于公开当前Vue自定义元素的宿主元素。