fix(utils): update isShadowRoot to use spec-compliant custom element regex#5059
fix(utils): update isShadowRoot to use spec-compliant custom element regex#5059bwyard wants to merge 1 commit intodequelabs:developfrom
Conversation
…regex The previous regex only matched ASCII characters, causing valid custom elements with Unicode names (e.g. cafe-menu, math-pi) to be incorrectly rejected as shadow root candidates. The spec allows a broader set of Unicode characters in Potential Custom Element Names (PCEN). Also adds an explicit check for reserved names (annotation-xml, color-profile, font-face, etc.) that match the pattern but are explicitly excluded by the spec. Closes issue dequelabs#5030
|
|
straker
left a comment
straker
left a comment
There was a problem hiding this comment.
Thanks for the pr. A suggestions about the regex.
| // Extends the ASCII-only regex to include Unicode characters permitted by the spec. | ||
| // https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name | ||
| const customElementRegex = | ||
| /^[a-z](?:[a-z0-9._-]|[\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD])*-(?:[a-z0-9._-]|[\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD])*$/; |
There was a problem hiding this comment.
According to the custom element name spec, the name must be a valid element local name, which the spec gives a regex as /^(?:[A-Za-z][^\0\t\n\f\r\u0020/>]*|[:_\u0080-\u{10FFFF}][A-Za-z0-9-.:_\u0080-\u{10FFFF}]*)$/u. I assume we could use that with a modification to match the custom element spec of requiring an alpha lower for the 0th char, no alpha upper chars, and a hyphen. Wouldn't this regex work? /^[a-z][a-z0-9-.:_\u0080-\u{10FFFF}]*-[a-z0-9-.:_\u0080-\u{10FFFF}]*$/u
Tested that customElements.define('c-') is a valid custom element name which means we don't need anything after the hyphen either.
There was a problem hiding this comment.
I'd also add a link to the valid element local name spec as well
There was a problem hiding this comment.
Thanks yeah I'll take a look a little later this evening and read through your suggestions and update the pr to match accordingly
3 participants
The custom element name regex in
isShadowRootonly matches ASCII characters. The HTML spec allows a broader set of Unicode characters in Potential Custom Element Names (PCEN), so valid elements like<café-menu>and<math-π>were being rejected as shadow root candidates.Two changes:
annotation-xml,color-profile,font-face, etc.): these match the pattern but are explicitly excluded by the specTests added for both cases.
Closes #5030