Question

我正在尝试实施this site中的功能。但是当我点击x-foo元素时，我的代码没有提醒任何东西。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>
    Test
</title>
</head>
<body>
<script type="text/javascript">
    var xFoo = document.createElement('x-foo');
    var xFoo = new XFoo();
    document.body.appendChild(xFoo);
    xFoo.onclick=function(){alert("It works!")};
</script>
<x-foo>
    Test
</x-foo>
</body>
</html>

有什么建议吗？（我在Chrome上）

Answer 1

看起来您正在尝试创建自定义元素，但尚未注册。创建自己的XFoo元素看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Custom Element</title>
  </head>
  <body>
    <!-- Create a template for the content inside your element -->
    <template>
      <h1>Hello from XFoo</h1>
    </template>

    <!-- Register your new element -->
    <script>
    var tmpl = document.querySelector('template');

    var XFooProto = Object.create(HTMLElement.prototype);

    XFooProto.createdCallback = function() {
      var root = this.createShadowRoot();
      root.appendChild(document.importNode(tmpl.content, true));
    };

    var XFoo = document.registerElement('x-foo', {
      prototype: XFooProto
    });
    </script>

    <!-- Use the element you've just registered as a tag -->
    <x-foo></x-foo>

    <!-- OR, create an instance using JavaScript -->
    <script>
    var el = document.createElement('x-foo');
    document.body.appendChild(el);
    </script>
  </body>
</html>

不幸的是，这种方法依赖于当前仅在Chrome 34中提供的原生API。正如其他人提到的，创建自己的自定义元素的更简单方法是使用Polymer。 Polymer是一个库，它为所有现代浏览器添加了对Web组件（实质上是您正在构建的组件）的支持。这包括IE 10 +，Safari 6 +，Mobile Safari，当前的Chrome和当前的Firefox。

我把a jsbin which shows how to create your own x-foo element using Polymer放在一起。

Answer 2

您应该尝试查看以下文章：

http://www.polymer-project.org/

这是一个开源的Github项目。我实际上尝试过这篇文章，但不推荐它。相反，请使用上面给出的链接。它使用Ajax和JSON。

HTML自定义标记不起作用

2 个答案: