Question

我试图以声明方式创建自定义元素，但遇到问题。我read so many docs，但由于超级新的和不断变化的技术，它们似乎都过时或不足。有谁知道如何解决这个问题？当前上下文（this）没有register，我也无法更新模板。我是在正确的轨道上吗？

<my-date><my-date>

  <element name="my-date">
    <template>
      <style>
        div {
          color: red;
        }
      </style>
    </template>
    <script>
      this.register({
        prototype: {
          createdCallback: function() {
            this.innerHTML = new Date();
          }
        }
      });
    </script>

http://jsbin.com/oGUKeyU/3/

Answer 1

您尝试使用lifecycle HTMLElement API：

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

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

在你的情况下，它将是这样的：

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

proto.createdCallback = function () {
    this.innerHTML = (new Date()).toString()
};

var xMyDate = document.registerElement('x-my-date', {
    prototype: proto
});
var newDateElement = new xMyDate();

alert(newDateElement.innerHTML);

但这只适用于金丝雀。

Answer 2

@ TruMan1绝对正确。由于一些复杂的时序问题，规范中<element>的声明性元素注册为put on hold。

可能会发生的是Polymer将遍历几个不同的时序模型，生命周期方法集等，直到开发人员和浏览器供应商找到上述邮件列表中列出的问题的良好解决方案。然后原生<element>注册将被重新访问。

如何以声明方式创建自定义HTML元素？

2 个答案: