Question

我试图创建具有可以从Jscript调用的函数的自定义元素，但是我无法使其工作并且看不出错误... 我的代码：

<html>
<head>
<script language="javascript" type="text/javascript">

var XFooPrototype = Object.create(HTMLButtonElement.prototype);
XFooPrototype.foo = function() {
   alert("foo");
}

document.registerElement('x-foo', {
   prototype: XFooPrototype
});

document.addEventListener("DOMContentLoaded", function(event) {
   var mytag = document.getElementById("my_tag");
   mytag.foo();
});

</script>
</head>
<body>
   <x-foo id="my_tag"></x-foo>
</body>
</html>

我会说foo（）被调用了，＆＃34; foo＆＃34;警报出现，但是当我调用它时，没有定义foo（）。有人能指出我的错误吗？

（我知道我应该使用class / extend和customElements.define，但这也需要在旧版浏览器上运行）

谢谢！

Answer 1

document.registerElement deprecated赞成customElements.define()。即使在大多数浏览器都知道这一点之前，我们也不推荐使用document.registerElement。

因此，在大多数情况下，您当前的代码不起作用。创建自定义元素的新方法是 -

<html>

<head>
</head>

<body>
  <x-foo id="my_tag"></x-foo>

  <script language="javascript" type="text/javascript">
    class MyElement extends HTMLElement {
      constructor() {
        super()
      }
      foo() {
        alert("foo");
      }
    }
    window.customElements.define('x-foo', MyElement);

    document.addEventListener("DOMContentLoaded", function(event)     {
      var mytag = document.getElementById("my_tag");
      mytag.foo();
    });
  </script>

</body>

</html>

目前Chrome支持此功能。其他人来了。

可以使用Polymer创建旧版浏览器可以支持的自定义元素。

HTML5：创建自定义元素

1 个答案: