Regex for allowed shadow hosts is inaccurate

[dylanb]

Product

axe-core

Product Version

4.11.1

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

According to the latest specs, our regex is slightly incorrect

Examples that fail that should not fail: <math-π>, <emotion-😍> or <café-menu>

Also, we are not testing for the reserved names

Here is a proposed updated isShadowRoot

function isShadowRoot(node) {
  if (!node || !node.shadowRoot) return false;

  const nodeName = node.nodeName.toLowerCase();

  // 1. Valid Built-in Host Elements (W3C Standard)
  const possibleShadowRoots = [
    'article', 'aside', 'blockquote', 'body', 'div', 
    'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 
    'header', 'main', 'nav', 'p', 'section', 'span'
  ];

  if (possibleShadowRoots.indexOf(nodeName) !== -1) {
    return true;
  }

  // 2. Reserved Custom Element Names (Must return false even if they match the regex)
  const reservedNames = [
    'annotation-xml', 'color-profile', 'font-face', 'font-face-src', 
    'font-face-uri', 'font-face-format', 'font-face-name', 'missing-glyph'
  ];

  if (reservedNames.indexOf(nodeName) !== -1) {
    return false;
  }

  // 3. Spec-Compliant PCEN (Potential Custom Element Name) Regex
  // This captures Unicode characters and is safe for legacy environments/JSDOM.
  const pcenRegex = /^[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])*$/;

  return pcenRegex.test(nodeName);
}