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

Question

我正在尝试以声明方式创建自定义元素，但遇到了问题。我read so many docs ，但由于 super 新技术和不断变化的技术，它们都显得过时或不足。有谁知道如何解决这个问题？当前上下文(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);

但这仅适用于金丝雀。