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.

Answer 2

This is most likely an error in the source code which has gone unnoticed (possibly by using search & replace?). React accepts element names which end on a - character and it gets rendered to the DOM via document.createElement() as any other element (for a simple example see here: https://jsfiddle.net/nso3gjpw/ ). Since browsers are very forgiving in case of weird html, it just renders the element as an unknown custom element which behaves roughly like a span element. The row- and col- elements are also styled ( https://github.com/pusher/react-slack-clone/blob/master/src/index.css#L73 ).

In the Blink rendering engine source code the following definition for tag names is given ( https://www.w3.org/TR/REC-xml/#NT-CombiningChar ):

// DOM Level 2 says (letters added):
//
// a) Name start characters must have one of the categories Ll, Lu, Lo, Lt, Nl.
// b) Name characters other than Name-start characters must have one of the categories Mc, Me, Mn, Lm, or Nd.
// c) Characters in the compatibility area (i.e. with character code greater than #xF900 and less than #xFFFE) are not allowed in XML names.
// d) Characters which have a font or compatibility decomposition (i.e. those with a "compatibility formatting tag" in field 5 of the database -- marked by field 5 beginning with a "<") are not allowed.
// e) The following characters are treated as name-start characters rather than name characters, because the property file classifies them as Alphabetic: [#x02BB-#x02C1], #x0559, #x06E5, #x06E6.
// f) Characters #x20DD-#x20E0 are excluded (in accordance with Unicode, section 5.14).
// g) Character #x00B7 is classified as an extender, because the property list so identifies it.
// h) Character #x0387 is added as a name character, because #x00B7 is its canonical equivalent.
// i) Characters ':' and '_' are allowed as name-start characters.
// j) Characters '-' and '.' are allowed as name characters.
//
// It also contains complete tables. If we decide it's better, we could include those instead of the following code.

Especially important here is rule j) Characters '-' and '.' are allowed as name characters. j) Characters '-' and '.' are allowed as name characters.