UIT INSIDE UIT INSIDE
2021/11/19 に公開 919 views

このエピソードについて

@potato4d が @T28_tatsuya に Vue 3 の defineCustomElement を Production で活用した事例について話を聞いてみました。

defineCustomElement

  • API の概要
    • defineCustomElement === VueComponent を HTMLElement で wrap するための関数
    • wrap したHTMLElement を customElements.define に渡して Web components を定義する
  • 内部構造
    • vue/runtime-core の renderer に渡して、ShadowRoot に VNode を描画する
      • Vue2 では「Vue インスタンスを作って 、 shadowRoot に appendChild 」というアプローチだった

UITの事例

LINE公式アカウントのクーポンページで、toC 向けの画面と toB 向けの画面でコンポーネントを共有することに

  • ユーザーがLINE上で閲覧するクーポン画面(toC)
    • 先日 UIリニューアルが行われた
  • お店がクーポンを発行するためのCMS(toB)
    • toC での表示をプレビュー画面がある

今回は toB 側のプレビュー用コンポーネントを defineCustomElement で出力することに

使ってみた所感

Positive

  • アプリ用に開発したコンポーネントを再利用できることは嬉しい
  • Vueアプリ用にコンポーネントを作って、それをアプリ外に再利用出来る仕組みは色々活用できる気がする

課題感

  • 以下の点に課題を感じた
    • Vue の props と Web components の attribute の扱いが異なる
  • style を再帰的に抽出してくれない

Refs