The latest updates on your projects. Learn more about Vercel for Git ↗︎

@Jermolene -- There is a problem with the SPEC - https://html.spec.whatwg.org/#prod-potentialcustomelementname allows the following unicode characters:

PCENChar ::=
"-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]

99% of them can be converted to a js regexp, but the last range [#x10000-#xEFFFF] causes a problem. JS unicode can only handle 4byte unicode ranges.

For 0x10000 and up we would need a poyfill see:

• https://stackoverflow.com/questions/15389497/how-to-match-high-value-unicode-characters-using-a-regex

Which leads to a ES6 polyfill

• https://github.com/paulmillr/es6-shim/blob/8e570a4b425a80f9b13ff027dbd28d65f201a319/es6-shim.js#L171-L183

I think this would cause a significant performance problem, since we do test every HTML element for validity.

I think we could implement it without the last range or leave it as it is in this PR.

Unicode table with easy to find ranges

• https://symbl.cc/en/unicode-table/

@Jermolene -- I did a bit more investigations. The main info I found about custom web-components was that web-components need to have a hyphen in the name. Almost none of the docs except the spec itself mentioned the full regexp.

So I thought about a validity check like this:

1. check the string, if it is a valid html tag -- using this spec: https://html.spec.whatwg.org/#syntax-tag-name
2. extend 1. and allow hyphens: -
3. implement a forbidden list according to https://html.spec.whatwg.org/#valid-custom-element-name
   3.1 exports.htmlForbiddenTags = "annotation-xml,color-profile,font-face,font-face-src,font-face-uri,font-face-format,font-face-name,missing-glyph".split(",");
4. if 1., 2. and 3. pass return the HTML tag as a valid tag -- That should be fast and cover 90% of html tags users will use.

6. if 5. does not match check for invalid character ranges up to \uFFFF. So we can detect problems in a range JS can handle.
7. We assume that everything out of js-range is valid, which would be OK for \u10000-\uEFFFF according to the spec.

@Jermolene -- what do you think?