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

Question

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;

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

And it worked just fine in Chrome (40), FireFox (40), 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 CSS 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.

html5rocks.com/en/tutorials/webcomponents/customelements

Ciel
– Ciel

2015-10-11 11:08:04 +00:00
Commented Oct 11, 2015 at 11:08 — Ciel
– Ciel, Commented Oct 11, 2015 at 11:08
blog.teamtreehouse.com/create-custom-html-elements-2

Ciel
– Ciel

2015-10-11 11:08:11 +00:00
Commented Oct 11, 2015 at 11:08 — Ciel
– Ciel, Commented Oct 11, 2015 at 11:08
Sorry, my bad... Thanks for the links!

Adam Libuša
– Adam Libuša

2015-10-11 11:23:53 +00:00
Commented Oct 11, 2015 at 11:23 — Adam Libuša
– Adam Libuša, Commented Oct 11, 2015 at 11:23

Michael Durrant · Accepted Answer · 2015-10-11 11:33:18Z

1

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

or

<input type="email">

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

B) HTML5 Custom Elements:

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

These let you do things 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>

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'
});

edited Oct 11, 2015 at 11:33

answered Oct 11, 2015 at 11:07

Michael Durrant

97.1k102 gold badges352 silver badges536 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ciel Over a year ago

I'm trying to find out if this is truly creating a valid HTML element that won't bite me later, or if it is basically modern browsers way of gracefully ignoring something stupid.

Ciel Over a year ago

By 'it works', I mean that the page renders and everything like I would expect it to, as if the new element is completely natural. I can select it with javascript, I can style it with CSS, I can find it in the dev tools, etc. I'm trying to figure out if this is doing the same thing as the custom elements.

Collectives™ on Stack Overflow

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

1 Answer 1

A) User-defined tags

B) HTML5 Custom Elements:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

A) User-defined tags

B) HTML5 Custom Elements:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related