创建自定义元素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());

它显示页面底部的输入，而不是我的表单（密码标签旁边）。

我的目的是创建我自己的标签库，所以我可以在我的项目中使用它们

感谢。