Custom elements API ​

defineCustomElement() ​

Tato metoda přijímá stejný parametr jako defineComponent, ale místo toho vrací konstruktor nativního custom elementu.

• Typ

  ts

  function defineCustomElement(
    component:
      | (ComponentOptions & { styles?: string[] })
      | ComponentOptions['setup']
  ): {
    new (props?: object): HTMLElement
  }

  Typ je pro lepší čitelnost zjednodušen.

• Podrobnosti

  Kromě běžných vlastnstí komponenty podporuje defineCustomElement() také speciální vlastností styles, která by měla být polem vložených CSS řetězců, které poskytují CSS, které by mělo být vloženo do stínového root elementu.

  Návratovou hodnotou je konstruktor custom elementu, který lze zaregistrovat pomocí customElements.define().

• Příklad

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* vlastnosti komponenty */
  })
  
  // Zaregistruje custom element.
  customElements.define('my-vue-element', MyVueElement)

• Viz také:

  • Průvodce - Vytváření custom elementů s Vue

  • Také si všimněte, že defineCustomElement() vyžaduje speciální konfiguraci, pokud se používá se Single-File komponentami (SFC).

useHost() ​

Pomocná funkce Composition API, která vrací hostitelský element aktuálního Vue custom elementu.

useShadowRoot() ​

Pomocná funkce Composition API, která vrací shadow root aktuálního Vue custom elementu.

this.$host ​

Vlastnost Options API, která vystavuje hostitelský element aktuálního Vue custom elementu.