Can I use custom tag names, without using web components, just for styling?

Question

To my suprise, modern browser seem to not complain if I use custom tag names, and then style those tags as if it where normal html tags, they behave like span elements, and like div elements, if I set display: block;.

I mean, even if I don't use polymer, or try to register the custom element.

For example, I have this: https://jsfiddle.net/hvybz0nq/4/

<flex-fixed>
  <sections>
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
    <div>Add Section</div>
  </sections>
  <splitter></splitter>
  <pages>
    <page>Page 1</page>
    <page>Page 2</page>
    <page>Page 3</page>
    <div>Add Page </div>
  </pages>
</flex-fixed>

With some css:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

flex-fixed, sections, section, div, pages, page {
  display: flex;
}

body {
  height: 100vh;
}

flex-fixed {
  width: 100%;
  height: 100%;
  flex-direction: column; 
  position: fixed;
}

section {
  border-right: 1px solid lightgrey;
}

splitter {
  height: 1px;
  background: lightgrey;
}

pages {
  height: 100%;
  border-left: 1px solid lightgrey;
  align-self:flex-end; 
  flex-direction: column;
}

page {
  border-bottom: 1px solid lightgrey;
}

section, page, div {
  padding: 10px;
}

Answer 1

You absolutely can do this. It will work. Custom elements are part of the HTML5 spec; explicit support for unregistered custom elements is included (see section 7). They're supported in all modern browsers (by default they are treated as inline elements, just like <span>), there's first-class support for them in Angular.js for example. Functionally speaking there is no difference at all between <foo> and <span class="foo">.

So should you? I break it down like this:

Reasons not to use custom elements

• Some older browsers (IE8 and prior) will only support them if you use a JavaScript shim (at least document.createElement('foo').)
• HTML validators (or some HTML editors that attempt to validate your code) may choke on those tags or interpret them as errors. This ranges from non-issue to total deal-breaker, depending on your workflow.
• Future compatibility. Depending on the tag names you choose, there is a nonzero chance that any custom tag name you invent will, at some point in the future, become blessed as a "real" HTML tag which carries specific behavior that you weren't expecting. The current convention is to include a hyphen in the name of all custom elements, which removes this risk; future HTML, SVG and MathML elements will never contain hyphens in their name.
• You'll have to spend a lot of time explaining to aghast developers and maintainers that no, it's fine, it really does work, no it's not XML, yes it will work with screen readers, yes it does look weird but it's totally OK honest look there is right in the spec
• There's generally no particular reason to do so, because <span class="foo"> does the same thing as <foo> without the tsuris

Reasons to use custom elements

• Because you can

On balance, I don't feel it's worth it.