Создать библиотеку пользовательских элементов HTML

Question

Я пытаюсь создать пользовательский элемент HTML5, я расширяю тег ввода

Вы можете увидеть мой код здесь:

<form id="form">
login : <input type='text' id='login' class='form-control'/>
password :   <nc-input id='pass'/>
name : <input type='text' id='name' class='form-control'/>
</form>

<script>
//declare a function that create tag
function createTag(tagName,HTMLElementType,HTMLName,HTMLType)
{

var proto = Object.create(HTMLElementType.prototype);
proto.createdCallback = function() {
    this.type = HTMLType;
    this.className = 'form-control'
};

//var host = document.querySelector("#form");
//var shadow = host.createShadowRoot();

var nCB = document.registerElement(tagName, {
    prototype: proto,
    extends: HTMLName
});

document.body.appendChild(new nCB());  //JS DOM

}

createTag('nc-input',HTMLInputElement,'input','text');
</script>

http://jsfiddle.net/NABILDEV/5z44v30x/22/

используя эту строку: document.body.appendChild(new nCB());

он отображает ввод в нижней части страницы, а не внутри моей формы (рядом с меткой пароля).

моя цель - создать собственную библиотеку тегов, чтобы я мог использовать их в своем проекте

Благодарю.