Can I use custom tag names without using web components, just for styling?
To my surprise, a modern browser doesn't seem to complain if I use my own tag names and then create those tags as if they were normal html tags, they behave like span elements and like div elements if I set display: block;
.
I mean even if I'm not using polymer or trying to register a custom item.
For example, I have the following: 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;
}
source to share
Please note, when requesting user comment to revert to this a couple of years later, I want to point out that this is deprecated; if the question had been posted today, I would have given a completely different answer. People tend to be much less intimidated by the idea of creating custom elements here in the brave new year 2018. The original 2016 answer follows:
You absolutely can do it. This will work. Custom elements are part of the HTML5 specification ; explicit support for unregistered custom items is included (see section 7). They are supported in all modern browsers (by default they are treated as inline elements as well <span>
), where, for example, there is support for Angular.js class 1. Functionally speaking, there is no difference between <foo>
and <span class="foo">
.
So? I break it down like this:
Reasons not to use custom elements
- Some older browsers (IE8 and earlier) will only support them if you are using a javascript shim (at least
document.createElement('foo')
.) - HTML validators (or some HTML editors that try to validate your code) can suppress these tags or interpret them as errors. Depending on your workflow, this ranges from a no-problem to a full conversation.
- Future compatibility. Depending on the tag names you choose, there is an unnecessary chance that any custom tag name you invent will at some point in the future become blessed as a "real" html tag that carries certain behavior you didn't expect. Update in 2018 : The current agreement must 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 will have to spend a lot of time explaining what the developers and maintainers are happy with, what no, this is great, it really works, no, this is not XML, yes, this will work with screen readers, yes, it looks strange, but it completely normal, honest look, is in the specification
- Generally, there is no particular reason for this, because it
<span class="foo">
does the same thing<foo>
without tsuris
Reasons for using custom elements
- Because you can
Overall, I don't feel like it's worth it.
source to share