Using custom HTML elements vs HTML elements w/ IDs or classes

Question

Out of curiosity, what, if any, impact will it have on a site or page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?

For example, if I create an element "container" and use it as <container> instead of <div class="container">, is there a performance difference or something?

I don't see this being used often and am wondering why?

Answer 1

That's like saying "What if I respect the syntax and grammar of English, but make up all the words?" While this thinking makes for good poetry, it doesn't lend itself well to technical fields ;)

HTML has a defined set of tags which are valid. If you use any tags which are made up, it will be invalid.

Now, that doesn't mean you can't get away with it; on the World Wide Web forgiveness is the default so if you used tags which you made up it wouldn't be the end of the world... but it would still be a bad idea because you'd have no guarantee how browsers handle those tags.

So the only real answer to "what impact will it have on a page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?" is anything could happen. Since you'd be using non-standard HTML elements, you'd end up with non-standard results, which none of us should try and predict.

If you really want to (and/or need to) use custom elements, look into XML. In XML you can "make up" your tags, but can still apply CSS and open the documents in a browser.

For example, save the following two files, and then open the XML file in a browser:

index.xml

<?xml-stylesheet href="style.xml.css"?>
<example>
 <summary>
     This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
 </summary>
 <main>
     <container>This is the stuff in the container</container>
 </main>
</example>

style.xml.css

summary {
    display:none;
}
main container {
    border:2px solid blue;
    background:yellow;
    color:blue;
}