Custom elements in HTML

Question

I am curious whether it is reliable to define ones own elements and select them using JavaScript or JQuery for that matter.

I have come across the question "Are custom elements valid HTML5?", but I'm not interested in a half-baked specification nor a formal way do define my own elements.

I just want to know, if I for example use

<orange-juice />

in my document and try to select it (via CSS, via jQuery) like so

orange-juice.fresh

will it work across browsers (and of course, is it maybe even backed by a part of the HTML5 specification which explicitly allows that?)

EDIT: cross-browser as in IE9+ and major desktop browsers.

EDIT: Maybe the orange-juice example was a little bit misleading, as was the mentioning of CSS. I do not want to create my own semantic element nor do I actually want to style content, I want to attach some meta-information which is then interpreted by a script. It could equally well be an empty div with data-attributes, but I feel that <my-meta-element /> would be a better choice than <div id="i-am-just-an-innocent-fill-in-carrying-some-information-which-does-not-have-anything-to-do-with-me-being-a-generic-block-displayed-element"></div>

Don't think so. Why would you want this? Languages and validators are created for conformity and re-usability. — peterdotplus, Oct 02 '13 at 12:53
Well .. it might be easy to test, so try it and let us know ! `;)` — Stphane, Oct 02 '13 at 12:58
Take a look at this answer http://stackoverflow.com/a/11467718/603520. In short the answer is probably but as @f00bar said give it a shot and let us know. I wouldn't suggest it though. — Jared, Oct 02 '13 at 12:59
You should use standard elements and identify it as orange juice in another way, such as a class or data attribute — Reinstate Monica Cellio, Oct 02 '13 at 12:59
I believe IE will support it if the element is created with javascript, that's how the HTML5 shims/shivs work to make IE apply styles to unknown elements, so it should work with anything, and all other browsers should support this as well, but it's not valid, nor is it a good idea. — adeneo, Oct 02 '13 at 12:59
There is a technique that will allow you to do it as @adeneo says, which is basically by creating them with Javascript (once custom elements are added to the DOM even IE8 will not ignore them). Look at HTML5shiv to see how they do it as a polyfill for HTML5 elements in old browsers. — Ennui, Oct 02 '13 at 13:05
That being said there is almost no good reason to do this rather than using traditional HTML elements and CSS classes/IDs. — Ennui, Oct 02 '13 at 13:05
There are many existing questions on this. It is not productive to spawn new copies of the same question, creating different sets of answers. Try asking what you *really* want to know, which seems to be about meta information (and then the key question is: who would use that information, and how?). — Jukka K. Korpela, Oct 02 '13 at 16:15

score 2 · Answer 1 · edited May 23 '17 at 12:09

2

HTML5 does not support all elements as "valid" so it won't work on some browsers. Even WAI-ARIA became valid not so far ago, let alone custom tags. However, this doesn't mean you cannot use them. This question can be helpful: Is there a way to create your own html tag in HTML5?

edited May 23 '17 at 12:09

Community

1
1

answered Oct 02 '13 at 13:18

Kuzgun

4,649
4
34
48

score 2 · Answer 2 · answered Oct 02 '13 at 13:20

If you just want to store data on an element you could use custom attributes (though it won't have the XML type syntax you are expecting):

Something like the following:

<div id="orange" data-fresh="true"></div>

You could then select this with JS:

var orange, fresh;
orange = document.getElementById("orange");
fresh = orange.getAttribute("fresh");

score 1 · Accepted Answer · answered Oct 02 '13 at 13:22

There is currently a specification in the works for allowing developers to author their own elements. This new feature is called "Web Components", and is not supported by any browsers by default as of writing this.

So while that may not be a practical answer directly, it would be advantageous to start formalizing a custom element if you plan on keeping it forward-compatible.

As far as defining your own elements, modern browsers will ignore any elements they don't recognize, however you can add CSS display styles to custom elements which will tell the browser that the element is meant to be rendered in some fashion. This was intentional so that new elements could be used by older browsers.

To support old versions of IE, you need to call document.createElement('custom-element-name') before IE will recognize the element.

Basically, to create an <example> element, you'd need to do as follows:

<!doctype html>
<html>
<head>
    <title>example element</title>
    <script>document.createElement('example');</script>
    <style>
        example {
            display: block;
        }
    </style>
</head>
<body>
    <example></example>
</body>
</html>

Custom elements in HTML

3 Answers3