I've seen some examples like this on the internet, showing what html elements with custom names work with regard to the application of css styles.
elementofake {
color:red;
font-size:30px;
font-weight:bold;
}<elementofake>Olá mundo.</elementofake>I would like to know why this works and if this practice is common in web development.
I think it's all due to the evolution of HTML, XHTML and CSS.
CSS can customize any element type that is valid within HTML and even some XML elements. Note that in the remote past there was XHTML (something that is practically embedded within HTML5), ie they are not fake elements, but rather customized.
An example that we can customize are SVG elements (an xml for vector images)
In other words, HTML is like an XML, however much more "permissive", so selectors should probably be free to manipulate, there were even variations of XHTML, such as:
In other words, CSS was not only created to meet the standard HTML , but any similar format of # . The rest will depend on the renderer that will render the CSS.
Of course today XHTML does not technically exist (although HTML5 pretty much supports everything it did), but the CSS inheritance is "free" for any tag type.
Note also that the evolution of HTML does not follow synchronized with CSS, each one evolves in its time, that is, if CSS only allowed "valid tags" we would not have to customize new tags that were "implemented" in HTML.
Most browsers are designed to be compatible with possible future HTML elements. Therefore, unrecognized elements are added but will not have any standard rendering types associated with it.
However, it is not a common practice, as
I based my answer on a similar question that can be found here
fakes elements are treated as divs by modern browsers. That's why they work. This is part of the HTML5 standard itself which introduces a modular framework to which new elements can be added.
For example, <x-foo data-bar="gaz"/> or <br data-bar="gaz"/> .