Can I define my own HTML elements for use with css and js?

Question

I read all about these hot new custom HTML elements you can do with today's browsers; Honestly, it looks pretty interesting. However, I saw that the camp is on it; There is a lot of debate about whether to use them or not.

But this is not my question!

I saw that in order to use custom HTML elements you need to first declare the element with javascript; but I don’t think so.

I just ran an HTML document with the following code:

<div>
   <header-label>Text</header-label>
</div>

And this works great in Chrome ( 40), FireFox ( 40), Internet Explorer 11, and Edge.

So, I am more confused than before; What's happening? Do I need to declare them or not? Even against it worked CSS, like the jQuery selector, angular directives; I could not find anything that would make me believe that it was something like a regular HTML element.

Answer 1

A) Custom tags

You can use custom tags anywhere.

If you want to supply <header-label>what you need. There are also custom HTML5 attributes such as

<input name="q" placeholder="Go to a Website">

or

<input type="email">

I researched further and read these blog comments and found out about ...

B) Custom HTML5 elements:

Per http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

This allows you to do something like

<hangout-module>
  <hangout-chat from="Paul, Addy">
    <hangout-discussion>
      <hangout-message from="Paul" profile="profile.png"
          profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.</p>
        <p>Heard of it?</p>
      </hangout-message>
    </hangout-discussion>
  </hangout-chat>
  <hangout-chat>...</hangout-chat>
</hangout-module>

( ), DOM :

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

, , .

var MegaButton = document.registerElement('mega-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});