3

假设我正在编写以下 Web 组件或自定义元素：

<!doctype html>

<html>
  <head>
    <script src="js/MutationObserver.js"></script>
    <script src="js/CustomElements.js"></script>

    <script>
      var proto = Object.create(HTMLElement.prototype);

      proto.createdCallback = function() { console.log('created');};
      proto.enteredViewCallback = function() {};

      document.register('x-foo', {prototype: proto});

      document.createElement('x-foo');
    </script>
  </head>

  <body>
  </body>
</html>

（github上的polyfill）这适用于Chrome。但是当我尝试在 PhantomJS 中运行它时，我收到以下错误：

TypeError: instanceof called on an object with an invalid prototype property.

http://localhost/~me/js/CustomElements.js:18
http://localhost/~me/js/CustomElements.js:217 in instantiate
http://localhost/~me/js/CustomElements.js:333
http://localhost/~me/js/CustomElements.js:342 in createElement
...

如果你想重现，这里是我的 phantomjs 脚本

var page = require('webpage').create();
page.open('http://localhost/~me/test.html', function() {
  phantom.exit();
});

我尝试过其他 polyfill，例如

但实际上他们都没有工作。任何想法如何解决这一问题 ？

4

1 回答 1

1

我有同样的问题。用这个 polyfill 解决了这个问题： https ://github.com/WebReflection/document-register-element

您需要使用 document.registerElement 方法。

于 2015-08-19T16:26:19.450 回答