custom elements vs web-components custom elements

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 ?