Question

我正在浏览一个颇受欢迎的回购的源代码，不确定以下标记是什么。

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

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

为什么在html标记后使用-？以及如何接受标签？

Answer 1

它们是custom elements。关于标签的有效性，您可能已经注意到，代码中没有在任何地方定义它。根据{{3}}的第5步，它是有效的，并且具有Element的命名空间。

有关自定义元素的更高级概述，请参阅spec，了解如何使用自定义元素。

附加说明：这些标记可以由带有类的常规<div>标记替换，功能不会有所不同。

Answer 2

这很可能是源代码中的一个未被注意到的错误（可能是通过使用搜索和替换？）。 React接受以-字符结尾的元素名称，它像其他元素一样通过document.createElement()呈现到DOM（有关简单示例，请参见https://jsfiddle.net/nso3gjpw/）。由于浏览器在使用怪异的html时非常宽容，因此只会将元素呈现为未知的自定义元素，其行为大致类似于span元素。 row-和col-元素也已设置样式（https://github.com/pusher/react-slack-clone/blob/master/src/index.css#L73）。

在Blink渲染引擎源代码中，标记名称的定义如下（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.

这里特别重要的是规则j) Characters '-' and '.' are allowed as name characters.

陌生的html / react标签row-，col-

2 个答案: