Hello World

Created: November-22, 2018

此示例建立名為 x-foo 的 Polymer 元素，其模板繫結到名為 message 的字串屬性。元素的 HTML 被匯入主文件，允許在 <body> 中使用 <x-foo> 標籤。

X-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>

的 index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>

請參閱 CodePen 中的演示