WebComponents

ReactもVueもなんかちょっとなぁ、と思いながらWebをさまよっていたらWebComponentsなる物を発見。チラチラ調べて見たら標準技術だし結構いける感じがしたのでちょっとやって見たのでその記録です。

やって見たもの

試しに書いて見たコードとその説明です。
現在、Chrome以外ではきちんと動きません。

簡単なサンプル

カスタムタグを作るだけの簡単なサンプルです。
<template>も使ってなく、JSオンリーです。

少し複雑なサンプル

カスタムタグの属性、プロパティを実装したサンプルです。
かなりシンプルに実装できるのに驚きです。

<template>のサンプル

カスタムタグを<template>を使って実装したサンプルです。

HTMLインポートのサンプル

<template>を使い、更にHTMLインポートでカスタムタグを別ファイルにしたサンプルです。

単純なカスタムタグライブラリの構築

属性などの実装が必要ないレイアウトのためだけのカスタムタグライブラリならJSをほとんど書かなくても良いのではと思ってやってみた実験です。

レイアウトのライブラリ化

実際にレイアウトのためのカスタムタグをテンプレートでライブラリ化してみました。

部品を作ってみる

レイアウトのためだけの簡単なテンプレートではなく、動作やそれに連動するプロパティを持つ部品を作ってみました。
今までの書いてきた方法では上手く行かなかった部分があり、その解決策も簡単に説明します。