Ciel Ciel - 1 year ago 77
jQuery Question

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

I've been reading all about these hot new custom HTML elements that you can make with today's browsers; It seems pretty interesting, to be honest. I've seen that the camp is out on this one, though; There's a lot of debate over whether to use them or not.

But that's not my question!

I've seen that in order to use custom HTML elements, you have to declare the element with javascript first; but I'm not finding this to be the case.

I simply ran an HTML document with the following code;


And it worked just fine in Chrome (
), FireFox (
), Internet Explorer 11, and Edge.

So I'm more confused than before; What is going on? Do I need to declare them, or not? Even
worked against it, as did jQuery selectors, angular directives; I couldn't find anything that led me to believe this was anything but a normal HTML element.

Answer Source

A) User-defined tags

You can use user-defined tags anywhere.

If you want to put <header-label> that's up to you. There are also custom HTML5 attributes which are things like

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


<input type="email">

I investigated further and read those blog post comments and learned about...

B) HTML5 Custom Elements:


These let you do things like

  <hangout-chat from="Paul, Addy">
      <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>

These would otherwise be ignored (though the content and valid tags within them will still render without issue), however you can add these elements as valid DOM elements with:

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

You can also base a user-defined element on an existing element to extend it, e.g.

var MegaButton = document.registerElement('mega-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download