聚合物基本问题

时间:2017-06-12 05:41:19

标签: polymer

您好我正在尝试执行基本的聚合物程序。在步骤var el = new HelloElement();获取以下异常。此外,元素本身未附加到页面上。

异常

Uncaught TypeError: Illegal constructor
    at PropertyAccessors (property-accessors.html:119)
    at TemplateStamp (template-stamp.html:119)
    at PropertyEffects (property-effects.html:1075)
    at PolymerElement (element-mixin.html:459)
    at GestureEventListeners (gesture-event-listeners.html:40)
    at LegacyElement (legacy-element-mixin.html:69)
    at PolymerGenerated (class.html:137)
    at (index):18
    at html-imports.js:580
    at html-imports.js:617

CODE

<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"> </script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
  <body>
      <script>
          HTMLImports.whenReady( function () {
          HelloElement = Polymer.Class({
              is: "hello-element",
              created: function () {
                  this.textContent = "Hello World";
              }
          });
          document.registerElement('hello-element', HelloElement);

          var el = new HelloElement();
          document.querySelector("body").appendChild(el);
      })
      </script>
  </body>
</html

1 个答案:

答案 0 :(得分:3)

尝试使用新的类语法,如下所示:

HTMLImports.whenReady(function() {
  class MyElement extends Polymer.Element {
    static get is() { return 'my-element'; }
    static get properties() {
      return {
        prop: {
          type: String
        }
      }
    }
    constructor() {
      super();
      this.prop = 'my-element'
    }
  }
  customElements.define(MyElement.is, MyElement);

  var el = new MyElement();
  el.textContent = 'my-element';
  document.querySelector("body").appendChild(el);
});

JSBin:http://jsbin.com/vefelacada/edit?html,console,output

查看更多信息:https://www.polymer-project.org/2.0/docs/devguide/registering-elements

===编辑

如果你真的想使用Polymer 1.0语法,你应该做类似的事情:(不是100%确定错误的真正含义)

  Polymer({
    is: "hello-element",
  });

  var el = document.createElement("hello-element");
  document.querySelector("body").appendChild(el);
  el.textContent = 'my-element';

http://jsbin.com/zihayumaqo/edit?html,console,output