Custom Elements API ​

defineCustomElement() ​

Ta metoda przyjmuje ten sam argument co defineComponent, ale zamiast tego zwraca natywny konstruktor klasy Custom Element.

• Typ

  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
  }

  Typ jest uproszczony w celu zwiększenia czytelności.

• Szczegóły

  Poza zwykłymi opcjami komponentu, defineCustomElement() obsługuje również wiele opcji związanych z niestandardowymi elementami:

  • styles: tablica stringów CSS, którymi dostarczamy style CSS do wstrzyknięcia w shadow root elementu.

  • configureApp : funkcja służąca do skonfigurowania instancji aplikacji Vue dla niestandardowego elementu.

  • shadowRoot : boolean, domyślnie true. Ustawienie na false sprawi że renderujemy niestandardowy element bez shadow root. Oznacza to, że <style> z niestandarowego elementu SFC nie będzie enkapsułowany.

  • nonce : string, jeśli zdefiniowana, będzie uzyta jako atrybut nonce na tagach style wstrzykniętych do shadow root.

  Pamiętaj, że te opcje zamiast być przekazanymi jako część komponentu, mogą być przekazane poprzez drugi argument:

  js

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

  Wartością zwrotną jest konstruktor klasy niestandarowego elementu, który można zarejestrować używając customElements.define().

• Przykład

  js

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

• Zobacz również

  • Poradnik - Budowanie elementów niestandardowych z Vue

  • Należy również pamiętać, że funkcja defineCustomElement() wymaga specjalnej konfiguracji, gdy jest używana z komponentami jednoplikowymi.

useHost() ​

Helper Composition API, który zwraca hostujący element obecnej instancji niestandarowego elementu Vue.

useShadowRoot() ​

Helper Composition API, który zwraca shadow root obecnej instancji niestandarowego elementu Vue.

this.$host ​

Własność Options API, która udostępnia hostujący element obecnej instancji niestandardowego elementu Vue.