Passer au contenu

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 intégrées pour fournir du CSS à injecter dans la racine de l'ombre 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 racine fantôme. 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 racine de l'ombre.

    Notez qu'au lieu d'être transmises dans le cadre 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

useHost()

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

useShadowRoot()

Un assistant d'aide de la Composition API qui renvoie la racine d'ombre 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.

API des éléments personnalisésa chargé