custom elements vs web-components custom elements

Question

I just started with custom elements and according to this article, a custom element can be defined as follows:

var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () { ... };
proto.enteredViewCallback = function () { ... };
document.register('x-foo', {
    prototype: proto
});

This works great in my chrome browser, every time I create a new element the 'createdCallback' is called.

Now, if I look at the official documentation here I don't see, for example, the createdCallback mentioned anywhere. Does someone understand the W3C documentation and can explain why this is ?

Furthermore, looking at custom elements from web-components they look completely different. So now there are two different types of custom elements. This doesn't make any sense or is there a good reason these two can exist together ?

Answer 1

The createdCallback was previously called readyCallback:

Custom elements have lifecycle callbacks which can be used to set up presentational aspects of a custom element. These are: readyCallback, which is called after a custom element is created; insertedCallback, which is called after a custom element is inserted into a document; and removedCallback, which is called after a custom element is removed from a document

http://www.w3.org/TR/components-intro/#lifecycle-callbacks

This was changed in the following Bug entry: Bug 22564 - [Custom]: Rename readyCallback to createdCallback. Discussion here.

The reason it isn't in the spec was because the bug was resolved in July 2013 and the draft updated in June. Such are the pitfalls of following working drafts!