API des éléments personnalisés ​

defineCustomElement() ​

Cette méthode accepte le même argument que defineComponent, mais renvoie à la place un constructeur natif de classe Élément personnalisé.

• Type

  ts

  function defineCustomElement(
    component:
      | (ComponentOptions & CustomElementsOptions)
      | ComponentOptions['setup'],
    options?: CustomElementsOptions
  ): {
    new (props?: object): HTMLElement
  }
  
  interface CustomElementsOptions {
    styles?: string[]
  
    // les options suivantes sont possibles à partir de la version 3.5
    configureApp?: (app: App) => void
    shadowRoot?: boolean
    nonce?: string
  }

  Les types sont simplifiés pour une meilleure lisibilité.

• Détails

  En plus des options normales des composants, defineCustomElement() supporte également un certain nombre d'options spécifiques aux éléments personnalisés :

  • styles: un tableau de chaînes CSS pour fournir du CSS à injecter dans la shadow root de l'élément.

  • configureApp : une fonction qui peut être utilisée pour configurer l'instance de l'application Vue pour l'élément personnalisé.

  • shadowRoot : boolean, par défaut true. Définir à false pour restituer l'élément personnalisé sans shadow root. Cela signifie que <style> dans les SFC d'éléments personnalisés ne sera plus encapsulé.

  • nonce : string, s'il est fourni, sera défini comme l'attribut nonce sur les tags de style injectés dans la shadow root.

  Notez qu'au lieu d'être transmises comme une partie du composant lui-même, ces options peuvent également être transmises via un deuxième argument :

  js

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

  La valeur de retour est un constructeur d'élément personnalisé qui peut être enregistré à l'aide de customElements.define().

• Exemple

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* options des composants */
  })
  
  // Enregistrez l'élément personnalisé.
  customElements.define('my-vue-element', MyVueElement)

• Voir aussi

  • Guide - Créer des éléments personnalisés avec Vue

  • Notez également que defineCustomElement() nécessite une configuration spéciale lorsqu'il est utilisé avec des composants monofichiers.

useHost() ​

Un assistant helper de la Composition API qui renvoie l'élément hôte de l'élément personnalisé Vue actuel.

useShadowRoot() ​

Un assistant helper de la Composition API qui renvoie la shadow root de l'élément personnalisé Vue actuel.

this.$host ​

Une propriété de l'Options API qui expose l’élément hôte de l’élément personnalisé Vue actuel.