title: What are valid HTML5 custom tags?
body: <p>Recently I've been reading about how you can make custom tags valid in HTML5 by putting a dash in the name, so I've been wondering what the actual rules / guidelines are for custom tags.</p>
  
  <p><code>custom-tag</code> √<br>
  <code>custom</code> X<br>
  <strong><code>-custom</code></strong> ?<br>
  <strong><code>custom-</code></strong> ?</p>
  
  <p>What I want to know is if the last two are valid.</p>
  
  <hr>
  
  <p>Also, as a bonus, I'm kind of curious about how custom attributes work.. as far as I know:</p>
  
  <p><code>&lt;div my-attribute="demo"&gt;</code> X<br>
  <code>&lt;div data-my-attribute="demo"&gt;</code> √<br>
  <code>&lt;custom-tag my-attribute="demo"&gt;</code> √<br>
  <code>&lt;custom-tag data-my-attribute="demo"&gt;</code> √  </p>
  
  <p>But what happens if I'm trying to use existing global attributes, such as <code>title</code> or <code>class</code>?</p>
  
  <p>Does this CSS..</p>
  
  <pre><code>custom-tag.banana {
      color: yellow;
  }
  </code></pre>
  
  <p>target this HTML?</p>
  
  <pre><code>&lt;custom-tag class="banana"&gt;
      Test!
  &lt;/custom-tag&gt;
  </code></pre>
  
  <p>Also, this CSS should target the above HTML whether or not global attributes work with custom tags, correct?</p>
  
  <pre><code>custom-tag[class=banana] {
      color: yellow;
  }
  </code></pre>
  
  <hr>
  
  <p>Finally, is there a rule/guideline stating I should have a "<code>-</code>" in the name of my custom attribute, like custom tags? E.g. <code>&lt;div custom-tag="demo"&gt;</code>. If there is, like my original question, does it work with <code>-customtag</code>, and <code>customtag-</code>?</p>
  
  <p>Thanks for the help. :)</p>