How to create custom HTML elements declaratively?

Question

I am trying to create custom elements declaratively but having trouble with it. I read so many docs, but they all seem outdated or insufficient because of the super new and changing technology. Does any know how to fix this? The current context (this) does not have register and I also not able to update the template. Am I on the right track?

<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

@TruMan1 is absolutely correct. Declarative element registration with <element> was put on hold in the spec because of some complicated timing issues.

What will probably happen is that Polymer will iterate through several different timing models, sets of lifecycle methods, etc., until developers and browser vendors find a good solution to the problems listed on the mailing list above. Then native <element> registration will be re-visited.

Answer 2

You try use lifecycle HTMLElement API:

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

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

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

In your case it will be like this:

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);

But this works only in Canary.