https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
There are two types of custom elements:

1. Autonomous custom elements
2. Customized built-in elements

Note:Safari seems to implement (1) only

document.registerElement is obsolete!!!!
OLD==> var XFoo = document.registerElement('x-foo');

Way to go!!!
window.customElements.define('custom-span', CustomSpan, { extends: 'span' });

仮にDivからextendsしたcustom elementを作ったとして、<custom-div>のような形でページに書いたとしても、 divのようにblockになるわけではない。そのように振る舞わせるには<div is='custom-div'>の形でなければならない。

Extending native HTML elements Let's say you wanted to create a fancier <button>. Instead of replicating the behavior and functionality of <button>, a better option is to progressively enhance the existing element using custom elements.

A customized built-in element is a custom element that extends one of the browser's built-in HTML tags. The primary benefit of extending an existing element is to gain all of its features (DOM properties, methods, accessibility). There's no better way to write a progressive web app than to progressively enhance existing HTML elements.

Note: Only Chrome 67 supports customized built-in elements (status) right now. Edge and Firefox will implement it, but Safari has chosen not to implement it. This is unfortunate for accessibility and progressive enhancement. If you think extending native HTML elements is useful, voice your thoughts on 509 and 662 on Github.

Browser support
Chrome 54 (status), Safari 10.1 (status), and Firefox 63 (status) have Custom Elements v1. Edge has begun development.

To feature detect custom elements, check for the existence of window.customElements:

const supportsCustomElementsV1 = 'customElements' in window;