API de Elementos Personalizados ​

defineCustomElement() ​

Este método acepta el mismo argumento que defineComponent, pero en su lugar devuelve un constructor de clase nativo de Elemento Personalizado.

• Tipo

  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
  }

  El tipo se ha simplificado para mayor legibilidad.

• Detalles

  Además de las opciones normales de componente, defineCustomElement() también admite una serie de opciones específicas para elementos personalizados:

  • styles: un array de cadenas CSS en línea para proporcionar CSS que debe inyectarse en el shadow root del elemento.

  • configureApp : una función que puede usarse para configurar la instancia de la aplicación Vue para el elemento personalizado.

  • shadowRoot : boolean, por defecto es true. Establécelo a false para renderizar el elemento personalizado sin un shadow root. Esto significa que las etiquetas <style> en SFCs de elementos personalizados ya no estarán encapsuladas.

  • nonce : string, si se proporciona, se establecerá como el atributo nonce en las etiquetas style inyectadas en el shadow root.

  Ten en cuenta que, en lugar de pasarse como parte del componente mismo, estas opciones también pueden pasarse a través de un segundo argumento:

  js

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

  El valor de retorno es un constructor de elemento personalizado que puede registrarse usando customElements.define().

• Ejemplo

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* component options */
  })
  
  // Registra el elemento personalizado.
  customElements.define('my-vue-element', MyVueElement)

• Véase también

  • Guía - Construyendo Elementos Personalizados con Vue

  • Ten también en cuenta que defineCustomElement() requiere configuración especial cuando se usa con Componentes de Archivo Único.

useHost() ​

Un asistente de Composition API que devuelve el elemento anfitrión del elemento personalizado de Vue actual.

useShadowRoot() ​

Un asistente de Composition API que devuelve el shadow root del elemento personalizado de Vue actual.

this.$host ​

Una propiedad de Options API que expone el elemento anfitrión del elemento personalizado de Vue actual.