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 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

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.

API des éléments personnalisésa chargé