ReactもVueもなんかちょっとなぁ、と思いながらWebをさまよっていたらWebComponentsなる物を発見。チラチラ調べて見たら標準技術だし結構いける感じがしたのでちょっとやって見たのでその記録です。
試しに書いて見たコードとその説明です。
現在、Chrome以外ではきちんと動きません。
カスタムタグを作るだけの簡単なサンプルです。
<template>も使ってなく、JSオンリーです。
カスタムタグの属性、プロパティを実装したサンプルです。
かなりシンプルに実装できるのに驚きです。
カスタムタグを<template>を使って実装したサンプルです。
<template>を使い、更にHTMLインポートでカスタムタグを別ファイルにしたサンプルです。
属性などの実装が必要ないレイアウトのためだけのカスタムタグライブラリならJSをほとんど書かなくても良いのではと思ってやってみた実験です。
実際にレイアウトのためのカスタムタグをテンプレートでライブラリ化してみました。
レイアウトのためだけの簡単なテンプレートではなく、動作やそれに連動するプロパティを持つ部品を作ってみました。
今までの書いてきた方法では上手く行かなかった部分があり、その解決策も簡単に説明します。