1

I'm trying to create a custom element HTML5, I extend input tag

you can see my code here :

<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/

using this line : document.body.appendChild(new nCB());

it displays the input on the bottom of the page and not inside my form (next to password label).

my purpose is to create my own tag's library, so I can use them in my project

Thanks.

nabilchelh
  • 71
  • 6
  • don't append to the dom in a `createdCallback`, "append" it by creating the element, hard-coded in HTML. in short, kill the last line. that said, you can't extent inputs like that, you would need to use `` to have the control inherit from your definition and the normal input API (where supported). – dandavis Mar 16 '16 at 20:38
  • 1
    Replace `document.body.appendChild(new nCB());` with `document.getElementById('form').appendChild(new nCB());` This will append the elements to the form rather than the page body. – NewToJS Mar 16 '16 at 20:41
  • @NewToJS: no, there's no need to append it anywhere, it's defined via markup. – dandavis Mar 16 '16 at 20:41
  • Ah wait, scrap that, it won't appear next to the password label anyway, it will append it to the bottom of the form. – NewToJS Mar 16 '16 at 20:43
  • it doesn't need instantiated, just calling `document.registerElement` will make it work in-place... – dandavis Mar 16 '16 at 21:09
  • @dandavis I want use tag like ..... if I don't use append I can't see my tag anymore in the form....@newtojs if I replace body by form the tag is place in the bottom of the form – nabilchelh Mar 16 '16 at 23:40
  • i think you're wanting this: http://jsfiddle.net/9pdhz901/ (look at the classname on the the middle input) – dandavis Mar 17 '16 at 00:24
  • or maybe something more like this: http://jsfiddle.net/qL6zLgxp/ (i don't know why all the jquery errors appear, but jq is not needed anyway... – dandavis Mar 17 '16 at 00:31
  • @dandavis great it's working fine...just one last question how can I do to use instead of is there any property missing ? – nabilchelh Mar 17 '16 at 09:13
  • @user3347018: you can't; you need to have an explicit close tag for all custom elements. just adding "/>" to the open tag does NOT make it self-closing. only a few pre-approved tags can be self-closing, and there's no way (currently) to add your element onto that list. sorry. – dandavis Mar 17 '16 at 16:57

0 Answers0