unfamiliar html/react tag row- , col-

Question

I was browsing through the source code of a moderately popular repo, and not sure what are the following tags.

see https://github.com/pusher/react-slack-clone/blob/master/src/index.js#L243

 <row->
              <col->
   ....
              </col->
</row->

why - after the html tags? and how is it an acceptable tag?

Answer 1

They are custom elements. In regards to the tag's validity, you may have noticed that it is not defined anywhere in the code. As per step 5 of the spec, it is valid, and has a namespace of Element.

For a higher-level overview of custom elements, take a look at the MDN tutorial on using custom elements.

An additional note: These tags could be replaced by regular <div> tags with classes, and the functionality would be no different.