커스텀 엘리먼트 API ​

defineCustomElement() ​

이 메서드는 defineComponent와 동일한 인자를 받지만, 대신 네이티브 커스텀 엘리먼트 클래스 생성자를 반환합니다.

• 타입

  ts

  function defineCustomElement(
    component:
      | (ComponentOptions & CustomElementsOptions)
      | ComponentOptions['setup'],
    options?: CustomElementsOptions
  ): {
    new (props?: object): HTMLElement
  }
  
  interface CustomElementsOptions {
    styles?: string[]
  
    // 아래 옵션들은 3.5+ 버전에서 지원됩니다.
    configureApp?: (app: App) => void
    shadowRoot?: boolean
    nonce?: string
  }

  가독성을 위해 타입이 단순화되었습니다.

• 세부사항

  일반 컴포넌트 옵션 외에도, defineCustomElement()는 커스텀 엘리먼트 전용 옵션들을 추가로 지원합니다:

  • styles: 엘리먼트의 섀도우 루트에 주입될 CSS를 제공하기 위한 인라인 CSS 문자열 배열입니다.

  • configureApp : 커스텀 엘리먼트의 Vue 앱 인스턴스를 구성하는 데 사용할 수 있는 함수입니다.

  • shadowRoot : boolean, 기본값은 true입니다. false로 설정하면 커스텀 엘리먼트가 섀도우 루트 없이 렌더링됩니다. 이 경우 커스텀 엘리먼트 SFC 내의 <style>은 더 이상 캡슐화되지 않습니다.

  • nonce : string, 제공되면 섀도우 루트에 주입되는 style 태그의 nonce 속성으로 설정됩니다.

  이러한 옵션들은 컴포넌트 자체의 일부로 전달하는 대신, 두 번째 인자를 통해서도 전달할 수 있습니다:

  js

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

  반환값은 customElements.define()를 사용하여 등록할 수 있는 커스텀 엘리먼트 생성자입니다.

• 예시

  js

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* 컴포넌트 옵션 */
  })
  
  // 커스텀 엘리먼트 등록
  customElements.define('my-vue-element', MyVueElement)

• 관련 문서

  • 가이드 - Vue로 커스텀 엘리먼트 빌드하기

  • 또한, Single-File Component와 함께 defineCustomElement()를 사용할 때는 특별한 설정이 필요함을 참고하세요.

useHost() ​

현재 Vue 커스텀 엘리먼트의 호스트 엘리먼트를 반환하는 Composition API 헬퍼입니다.

useShadowRoot() ​

현재 Vue 커스텀 엘리먼트의 섀도우 루트를 반환하는 Composition API 헬퍼입니다.

this.$host ​

현재 Vue 커스텀 엘리먼트의 호스트 엘리먼트를 노출하는 Options API 속성입니다.