Custom Elements API ​

defineCustomElement() ​

Этот метод принимает тот же аргумент, что и defineComponent, но возвращает нативный конструктор класса Custom Element.

• Тип

  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
  }

  Тип упрощён для удобства чтения.

• Подробности

  В дополнение к обычным опциям компонента, defineCustomElement() также поддерживает ряд опций, специфичных для пользовательских элементов:

  • styles: массив инлайновых CSS-строк для подключения CSS, который будет внедрён в shadow root элемента.

  • configureApp : функция для настройки экземпляра приложения Vue пользовательского элемента.

  • shadowRoot : boolean, по умолчанию true. Установите false, чтобы рендерить пользовательский элемент без shadow root. В этом случае <style> в SFC пользовательских элементов больше не будут инкапсулированы.

  • nonce : string, если указан, будет установлен как атрибут nonce на тегах <style>, внедряемых в shadow root.

  Обратите внимание, что эти опции можно передавать не только как часть самого компонента, но и вторым аргументом:

  js

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

  Возвращаемое значение — конструктор пользовательского элемента, который можно зарегистрировать с помощью customElements.define().

• Пример

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* component options */
  })
  
  // Регистрируем пользовательский элемент.
  customElements.define('my-vue-element', MyVueElement)

• См. также

  • Руководство — Создание пользовательских элементов с Vue

  • Также обратите внимание, что для defineCustomElement() требуется особая настройка при использовании с однофайловыми компонентами.

useHost() ​

Вспомогательная функция Composition API, возвращающая хост-элемент текущего пользовательского элемента Vue.

useShadowRoot() ​

Вспомогательная функция Composition API, возвращающая shadow root текущего пользовательского элемента Vue.

this.$host ​

Свойство Options API, предоставляющее доступ к хост-элементу текущего пользовательского элемента Vue.