てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

Main Content

結構前に 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

Polymer 1.0 って すげー便利じゃん!!

詳細へ »