electronでWeb Componentsを使うサンプル

electron v1.5以降のバージョンでは、WebComponentsが普通に使えるようになりました。 (v1.5系はpre-release版だけでstableのリリースがなかったため、実質的にはv1.6系以降のバージョンですね。)

ということで、以前↓で書いた記事の内容をelectronで動かすサンプルを作りました。

WebComponentsの詳細については、最初のリンクで書いた記事で説明しています。
ということで、ここではコンポーネントの作り方の詳細な説明は端折り、サンプルを見ていきたいと思います。

サンプル

サンプルコードは以下のリポジトリに上げています。
https://github.com/sourcechord/electron-webcomponents-sample

実行すると、こんな風にストップウォッチのコンポーネントが二つ表示されます。
f:id:minami_SC:20170910173155p:plain

プロジェクト構造

f:id:minami_SC:20170910173208p:plain
stopwatch-elementフォルダを作り、このフォルダの中でストップウォッチのコンポーネント定義を行っています。

コンポーネントの使い方

コンポーネントを定義したhtmlファイルを<link>タグで読み込むと、そのコンポーネントが利用できるようになります。
簡単ですね!!

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Componentsのサンプル</title>
    <link rel="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>