Question

我正在关注https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html

我似乎无法让代码运行，我认为这是因为我做了一些根本错误的事情。

devguide.js：

// register an element
MyElement = Polymer({

  is: 'my-element',

  created: function() {
    this.textContent = 'My element!';
  }

});

// create an instance with createElement:
var el1 = document.createElement('my-element');

的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="./bower_components/polymer/polymer.html">
    <script src="./devguide.js"></script>
  </head>
  <body>
  </body>
</html>

Answer 1

您是如何查看index.html的？您可能遇到https://github.com/Polymer/polymer/issues/1535

中描述的问题

要使HTML导入生效，您无法从file:// URL访问它，您需要运行Web服务器。

Answer 2

在使用本机html导入的浏览器（如chrome）中，在运行index.js脚本之前导入polymer.html文件，因此它可以访问Polymer变量。

我认为你使用的浏览器没有像Firefox这样的原生html导入，你可以看到here

Here是jsBin演示，使用的代码适用于Chrome但不适用于Firefox，（请注意我还会在主体中放置<my-element></my-element>标记，因此您可以看到它＆＃39 ; s工作，否则它与你的例子相同）。

如果是这种情况，你就不能在头脑中包含注册元素的脚本，要么必须将脚本放入html文件，例如

<link rel="import" href="./devguide.html"></link>

的devguide.html

<script>
  MyElement = Polymer({

    is: 'my-element',

    created: function() {
      this.textContent = 'My element!';
    }
  });
</script>

或者您可以将脚本包含在主html文件中，＆＃34; index.html＆＃34;，但要执行此操作，您必须等待确保使用HTMLImports.whenReady <准备好html导入/ p>

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="./bower_components/polymer/polymer.html">
</head>
<body>
  <script>
    HTMLImports.whenReady(function () {
      MyElement = Polymer({
        is: 'my-element',
        created: function() {
          this.textContent = 'My element!';
        }
      });
    });
  </script>
</body>
</html>

Demo

在创建元素的实例时，您可以在index.html文件中的任何位置声明它，如下所示：

<my-element></my-element>

或者在等待WebComponentsReady事件后在javascript中创建它，但如果您使用此方法，则必须将其放入dom中：

window.addEventListener('WebComponentsReady', function(e) {

    //- because you register it using MyElement = Polymer...
    var myElement = new MyElement();

    //- add it to the body, or wherever else you want, if you want to see it
    document.body.appendChild(myElement);
});

学习Polymer，获取ReferenceError：未定义Polymer

2 个答案: