title: Custom elements in HTML
body: <p>I am curious whether it is reliable to define ones own elements and select them using JavaScript or JQuery for that matter.</p>
  
  <p>I have come across the question <a href="https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5">"Are custom elements valid HTML5?"</a>, but I'm not interested in a half-baked specification nor a formal way do define my own elements.</p>
  
  <p>I just want to know, if I for example use</p>
  
  <pre><code>&lt;orange-juice /&gt;
  </code></pre>
  
  <p>in my document and try to select it (via CSS, via jQuery) like so</p>
  
  <pre><code>orange-juice.fresh
  </code></pre>
  
  <p>will it work across browsers (and of course, is it maybe even backed by a part of the HTML5 specification which explicitly allows that?)</p>
  
  <p><strong>EDIT:</strong> cross-browser as in IE9+ and major desktop browsers.</p>
  
  <p><strong>EDIT:</strong> 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 <code>&lt;my-meta-element /&gt;</code> would be a better choice than <code>&lt;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"&gt;&lt;/div&gt;</code></p>