Vue3.5からの改善と振り返るdefineCustomElementについて

BRANK

Vue3.5の更新では defineCustomElement に関する改善が含まれています。今回の記事ではその defineCustomElement に関連する事項についてと、改善された内容を紹介します。Custom Elementsとは？defineCustomElement についてを紹介する前に、まずは根底の知識となる「Custom Elements」についてを解説します。Custom ElementsはWeb Componentsを構成する一部で、独自のHTML要素を作成するためのJavaScript APIです。独自の定義のため、通常のHTML要素とは異なりダッシュが使われている名前( kebab-case )である必要があります。 <progress></progress> <custom-progress></custom-progress> Custom Elementsの利点としては、UIライブラリ・フレームワークを使用しているかに関わらずに利用できることが挙げられます。例えばフロントエンドの技術スタックが異なるアプリケーション間で共通のUIコンポーネントを使用する場合に有用です。!ちなみにVue内でCustom Elementsを使用するために一部設定を追加する必要がありますが、必要なテストケースはすべて通過しているため安心して使用できます。Web標準技術の相互運用向上プロジェクトであるInteropではWeb Componentsの改善…