Polymer 2.0 を 触ってみた
この記事は 2018年 4月 28日 に書かれた記事です。
結構前に Polymer 1 を 触ってみたのですが 今は 2 に なっていたので 今はどんな感じなのか 触ってみました
何を 今更… って 感じですが 公式ドキュメント に 載っているものを そのまま 動かして 使用感だけ 感じてみようかな という 感じです
クイックスタート
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<script>
window.Polymer = {
rootPath: '/your/application/root'
};
</script>
<link rel="import" href="./custom-element.html">
</head>
<body>
<header-element>Header</header-element>
</body>
</html>
custom-element.html
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<dom-module id="header-element">
<template>
<link rel="stylesheet" href="[[rootPath]]/resources/css/style.css">
<header>
<h1 class="text-center"><slot></slot></h1>
</header>
</template>
<script>
class HeaderElement extends Polymer.Element {
static get is() { return "header-element"; }
}
customElements.define(HeaderElement.is, HeaderElement);
</script>
</dom-module>
触ってみた感想
1系のときは webcomponents.js や polymer.html を ダウンロード して 使うような 形だったと思うのですが
2系では polygit.org で 配信してくれているみたいですね
npm からの ダウンロードは 引き続きあるので そちらを使うの一般的みたいですね
書き方としては Polymer() と 書いていたのが class を 指定して 書くようになっていました
実際に動かしてみると ページのレンダリングまで 2秒程度 待たされる感じです…
全機能を 読み込んでいるから遅いのかもしれませんが ちょっと 遅いですよね…
もう Polymer 3.0 が Latest preview に 入っていて 完全CLIベース に なりそう??
(詳しく見ていないので わからないけど…)
Polymer 3.0 は 出たら 早めに 触っておきたいですね!!
公式ドキュメント
Global Polymer settingsを参考にさせていただきました。
https://www.polymer-project.org/2.0/docs/devguide/settings
Try Polymerを参考にさせていただきました。
https://www.polymer-project.org/2.0/start/quick-tour
Polymer 3.0: Latest previewを参考にさせていただきました。
https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview
