electron v1.5以降のバージョンでは、WebComponentsが普通に使えるようになりました。 (v1.5系はpre-release版だけでstableのリリースがなかったため、実質的にはv1.6系以降のバージョンですね。)
ということで、以前↓で書いた記事の内容をelectronで動かすサンプルを作りました。
WebComponentsの詳細については、最初のリンクで書いた記事で説明しています。
ということで、ここではコンポーネントの作り方の詳細な説明は端折り、サンプルを見ていきたいと思います。
サンプル
サンプルコードは以下のリポジトリに上げています。
https://github.com/sourcechord/electron-webcomponents-sample
実行すると、こんな風にストップウォッチのコンポーネントが二つ表示されます。
プロジェクト構造
stopwatch-elementフォルダを作り、このフォルダの中でストップウォッチのコンポーネント定義を行っています。
コンポーネントの使い方
コンポーネントを定義したhtmlファイルを<link>タグで読み込むと、そのコンポーネントが利用できるようになります。
簡単ですね!!
index.html
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Web Componentsのサンプル</title><linkrel="import"href="stopwatch-element/stopwatch-element.html"></head><body><h1>Web Componentsのサンプル</h1><stopwatch-element></stopwatch-element><hr /><stopwatch-element></stopwatch-element><hr /></body></html>