What are the reasons NOT to use custom HTML tags?

Question

Given current HTML5 specs that allows creating custom HTML elements (as long as their name contains a dash), and the fact that Web Components seem to be a feature that's here to stay, I'd like to know why is creating your own custom HTML elements frowned upon?

Note, that I'm not asking whether to use Web Components - which are still a moving target, and even with great polyfills like Polymer might not be ready for production yet. I'm asking about creating your own custom HTML tags and styling them, without attaching any JS APIs to them.

Answer 1

Short answer: I haven't heard any very compelling reasons to avoid them.

However, here are some recurring arguments I've heard made:

• Doesn't work in old IE (just document.createElement("my-tag"); should fix that).
• Global namespace clashes (same applies to class names, and custom elements in general).
• CSS selector performance (doh, this is just about the last thing you should worry about).
• Separation of functionality, meaning and presentation. This is actually the only argument I've heard that IMHO has any valid basis to it. You're of course better off with semantic HTML (search engines and all that), but if you were going to use a div for it otherwise, I don't see why you couldn't use a custom tag instead.

Answer 2

One of the arguments against custom tags is their implied incompatibility with screen readers. This issue can be resolved with WAI-ARIA attributes.

There exists an issue in IE11, which breaks table layout if a custom element without display property is inserted inside a table cell. Check the plunker code. Therefore, it's the safest to declare all new elements explicitly, for example like so:

new-element {
    display: block;
}