Custom elements in HTML [duplicate]

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>

Answer 1

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?