polymer-1.0ポリマー1.0を使い始める


備考

  • 上記の例は、ローカルDOMを使用するカスタム(ポリマー)要素の最小限の構造を示しています。
  • Polymer要素はscriptタグを使って完全に作成することもできますが、これはこのトピックの一部ではありません。
  • styleタグは最低限の構造の一部ではありませんが、理解のためにそこに保持されています。
  • また、scriptタグは、命令型と宣言型の両方で使用することができます。つまり、ユーザは少なくとも上に書かれたコードとは別のjsファイルを持ち、それを要素で参照することができます。
  • それに注意してくださいiddom-moduleしてisの財産Polymer constructor常に同じである必要があります。

バージョン

バージョン発売日
v1.6.0 2016年6月29日
v1.5.0 2016-05-31
v1.4.0 2016年5月18日
v1.0.0 2015-05-27

要素の構造

内容のない要素を定義する。

<dom-module id="empty-element">
  <template>
    <style>
    </style>
  </template>

  <script>
    Polymer({
      is: 'empty-element',
    });
  </script>
</dom-module>
 

そして、あなたは他のどのページでも新しい要素を使うことができます。

<!DOCTYPE html>
<html>
    <head>
        <!-- Using lite version as Polymer does not require Polyfill for Shadow Dom -->
        <script src="path/to/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <!-- Importing the element assuming file name is also empty-element.html -->
        <link rel="import" href="empty-element.html">
    </head>

    <body>
        <empty-element></empty-element>
    </body>
</html>