refactor: align component check with ember-cli#2724 canonical (lists + scope)

Remove the inline PascalCase-regex isComponentInvocation heuristic in
favor of the lists + scope pattern from ember-cli#2689 / ember-cli#2724. The new
lib/utils/is-native-element.js mirrors ember-cli#2724's util byte-for-byte so
the two PRs can land in either order without conflict.

evaluateChild / evaluateChildren now thread sourceCode through the
recursion so the scope check has access to the enclosing template's
bindings.

Heuristic approaches were explicitly rejected in ember-cli#2689 because lowercase
tags CAN be components when shadowed by scope bindings. Treating custom
elements as opaque (the same as components) is a behavior improvement
— matches ember-cli#2724's convention.

Author: johanrd

lib/rules/template-anchor-has-content.js

@@ -1,20 +1,4 @@
-// Matches a tag string that is a component invocation rather than a plain
-// HTML element: PascalCase (`Foo`), argument-invocation (`@foo`), path on
-// `this.` (`this.foo`), dotted path (`foo.bar`), or named-block-style
-// `foo::bar`. Keep this mirrored with the inline pattern in
-// lib/rules/template-no-invalid-interactive.js until a shared utility lands.
-function isComponentInvocation(tag) {
-  if (!tag) {
-    return false;
-  }
-  return (
-    /^[A-Z]/.test(tag) ||
-    tag.startsWith('@') ||
-    tag.startsWith('this.') ||
-    tag.includes('.') ||
-    tag.includes('::')
-  );
-}
+const { isNativeElement } = require('../utils/is-native-element');
 
 function isDynamicValue(value) {
   return value?.type === 'GlimmerMustacheStatement' || value?.type === 'GlimmerConcatStatement';
@@ -73,7 +57,7 @@ function hasAccessibleNameAttribute(node) {
 //   { accessible: true }    — statically contributes a non-empty name.
 //   { accessible: false }   — contributes nothing (empty text, aria-hidden
 //                             subtree, <img> without non-empty alt, …).
-function evaluateChild(child) {
+function evaluateChild(child, sourceCode) {
   if (child.type === 'GlimmerTextNode') {
     const text = child.chars.replaceAll('&nbsp;', ' ').trim();
     return { dynamic: false, accessible: text.length > 0 };
@@ -97,8 +81,9 @@ function evaluateChild(child) {
       return { dynamic: false, accessible: false };
     }
 
-    // Component invocations are opaque — we can't see inside them.
-    if (isComponentInvocation(child.tag)) {
+    // Non-native children (components, custom elements, scope-shadowed tags)
+    // are opaque — we can't see inside them.
+    if (!isNativeElement(child, sourceCode)) {
       return { dynamic: true, accessible: false };
     }
 
@@ -124,16 +109,16 @@ function evaluateChild(child) {
       return { dynamic: false, accessible: true };
     }
 
-    return evaluateChildren(child.children || []);
+    return evaluateChildren(child.children || [], sourceCode);
   }
 
   return { dynamic: false, accessible: false };
 }
 
-function evaluateChildren(children) {
+function evaluateChildren(children, sourceCode) {
   let dynamic = false;
   for (const child of children) {
-    const result = evaluateChild(child);
+    const result = evaluateChild(child, sourceCode);
     if (result.accessible) {
       return { dynamic: false, accessible: true };
     }
@@ -162,6 +147,7 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
     return {
       GlimmerElementNode(node) {
         if (node.tag !== 'a') {
@@ -179,7 +165,7 @@ module.exports = {
           return;
         }
 
-        const result = evaluateChildren(node.children || []);
+        const result = evaluateChildren(node.children || [], sourceCode);
         if (result.accessible || result.dynamic) {
           return;
         }

lib/utils/is-native-element.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const htmlTags = require('html-tags');
+const svgTags = require('svg-tags');
+const { mathmlTagNames } = require('mathml-tag-names');
+
+// Authoritative set of native element tag names. Mirrors the approach
+// established by #2689 (template-no-block-params-for-html-elements), which
+// the maintainer requires for component-vs-element discrimination in this
+// plugin. Heuristic approaches (PascalCase detection, etc.) were explicitly
+// rejected there because a lowercase tag CAN be a component in GJS/GTS when
+// the name is bound in scope (e.g. `const div = MyComponent; <div />`).
+const ELEMENT_TAGS = new Set([...htmlTags, ...svgTags, ...mathmlTagNames]);
+
+/**
+ * Returns true if the Glimmer element node is a native HTML / SVG / MathML
+ * element — i.e. the tag name is in the authoritative list AND is not
+ * shadowed by an in-scope binding.
+ *
+ * Returns false for:
+ *  - components (PascalCase, dotted, @-prefixed, this.-prefixed, ::-namespaced —
+ *    none of these tag names appear in the HTML/SVG/MathML lists)
+ *  - custom elements (`<my-widget>`) — accepted false negative; the web-
+ *    components namespace is open and can't be enumerated
+ *  - scope-bound identifiers (`<div>` when `div` is a local `let` / `const` /
+ *    import / block-param in the enclosing scope)
+ *
+ * @param {object} node - GlimmerElementNode
+ * @param {object} [sourceCode] - ESLint SourceCode, for scope lookup. When
+ *   omitted, the scope check is skipped (the result is then list-based only —
+ *   suitable for unit tests).
+ */
+function isNativeElement(node, sourceCode) {
+  if (!node || typeof node.tag !== 'string') {
+    return false;
+  }
+  if (!ELEMENT_TAGS.has(node.tag)) {
+    return false;
+  }
+  if (!sourceCode || !node.parent) {
+    return true;
+  }
+  const scope = sourceCode.getScope(node.parent);
+  const firstPart = node.parts && node.parts[0];
+  if (firstPart && scope.references.some((ref) => ref.identifier === firstPart)) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Inverse of {@link isNativeElement}. Returns true when the node should NOT
+ * be treated as a native HTML element — either because it's a component
+ * invocation (PascalCase, dotted, @-prefixed, this.-prefixed, custom element)
+ * OR a tag name that's shadowed by a scope binding.
+ */
+function isComponentInvocation(node, sourceCode) {
+  return !isNativeElement(node, sourceCode);
+}
+
+module.exports = { isNativeElement, isComponentInvocation, ELEMENT_TAGS };

tests/lib/utils/is-native-element-test.js

@@ -0,0 +1,91 @@
+'use strict';
+
+const { isNativeElement, ELEMENT_TAGS } = require('../../../lib/utils/is-native-element');
+
+// Tests exercise the list-lookup path only. Scope-based shadowing is covered
+// by the rule-level test suites (see tests/lib/rules/template-no-block-params-
+// for-html-elements.js and siblings) because it requires a real ESLint
+// SourceCode / scope manager that's only built up by the rule tester.
+
+describe('isNativeElement — list-only behavior (no sourceCode)', () => {
+  it('returns true for lowercase HTML tag names', () => {
+    expect(isNativeElement({ tag: 'div' })).toBe(true);
+    expect(isNativeElement({ tag: 'article' })).toBe(true);
+    expect(isNativeElement({ tag: 'h1' })).toBe(true);
+    expect(isNativeElement({ tag: 'button' })).toBe(true);
+    expect(isNativeElement({ tag: 'form' })).toBe(true);
+    expect(isNativeElement({ tag: 'section' })).toBe(true);
+  });
+
+  it('returns true for SVG tag names', () => {
+    expect(isNativeElement({ tag: 'svg' })).toBe(true);
+    expect(isNativeElement({ tag: 'circle' })).toBe(true);
+    expect(isNativeElement({ tag: 'path' })).toBe(true);
+  });
+
+  it('returns true for MathML tag names', () => {
+    expect(isNativeElement({ tag: 'mfrac' })).toBe(true);
+    expect(isNativeElement({ tag: 'math' })).toBe(true);
+  });
+
+  it('returns false for PascalCase component tags', () => {
+    expect(isNativeElement({ tag: 'Button' })).toBe(false);
+    expect(isNativeElement({ tag: 'MyWidget' })).toBe(false);
+    // Native-tag names in PascalCase — the core bug case.
+    expect(isNativeElement({ tag: 'Article' })).toBe(false);
+    expect(isNativeElement({ tag: 'Form' })).toBe(false);
+    expect(isNativeElement({ tag: 'Main' })).toBe(false);
+    expect(isNativeElement({ tag: 'Nav' })).toBe(false);
+    expect(isNativeElement({ tag: 'Section' })).toBe(false);
+    expect(isNativeElement({ tag: 'Table' })).toBe(false);
+  });
+
+  it('returns false for named-arg invocations', () => {
+    expect(isNativeElement({ tag: '@heading' })).toBe(false);
+    expect(isNativeElement({ tag: '@tag.foo' })).toBe(false);
+  });
+
+  it('returns false for this-path invocations', () => {
+    expect(isNativeElement({ tag: 'this.myComponent' })).toBe(false);
+    expect(isNativeElement({ tag: 'this.comp.sub' })).toBe(false);
+  });
+
+  it('returns false for dot-path invocations', () => {
+    expect(isNativeElement({ tag: 'foo.bar' })).toBe(false);
+    expect(isNativeElement({ tag: 'ns.widget' })).toBe(false);
+  });
+
+  it('returns false for named-block / namespaced invocations', () => {
+    expect(isNativeElement({ tag: 'foo::bar' })).toBe(false);
+    expect(isNativeElement({ tag: 'Foo::Bar' })).toBe(false);
+  });
+
+  it('returns false for custom elements (accepted false negative)', () => {
+    // Custom elements aren't in the html-tags/svg-tags/mathml-tag-names
+    // allowlists. They're treated as "not a native element" so downstream
+    // rules skip them — matches the convention established in PR #2689.
+    expect(isNativeElement({ tag: 'my-element' })).toBe(false);
+    expect(isNativeElement({ tag: 'x-foo' })).toBe(false);
+  });
+
+  it('returns false for empty / missing / non-string tag', () => {
+    expect(isNativeElement({ tag: '' })).toBe(false);
+    expect(isNativeElement({ tag: undefined })).toBe(false);
+    expect(isNativeElement({ tag: null })).toBe(false);
+    expect(isNativeElement({ tag: 123 })).toBe(false);
+    expect(isNativeElement({})).toBe(false);
+    expect(isNativeElement()).toBe(false);
+    expect(isNativeElement(null)).toBe(false);
+  });
+});
+
+describe('ELEMENT_TAGS', () => {
+  it('includes all HTML, SVG, and MathML tag names', () => {
+    // Sanity check — if this ever drops below a reasonable size, one of the
+    // underlying packages has changed contract.
+    expect(ELEMENT_TAGS.size).toBeGreaterThan(200);
+    expect(ELEMENT_TAGS.has('div')).toBe(true);
+    expect(ELEMENT_TAGS.has('circle')).toBe(true);
+    expect(ELEMENT_TAGS.has('mfrac')).toBe(true);
+  });
+});