Fix false positives: remove PascalCase component shadowing detection

The original ember-template-lint no-shadowed-elements rule only checks
lowercase HTML elements shadowed by local block params. PascalCase tags
like <Input>, <Form>, <Select>, <Textarea> are legitimate Ember/Glimmer
component invocations and should not be flagged.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Author: NullVoxPopuli

lib/rules/template-no-shadowed-elements.js

@@ -177,40 +177,27 @@ module.exports = {
           return;
         }
 
-        const firstChar = tag.charAt(0);
-        const startsWithUpperCase =
-          firstChar === firstChar.toUpperCase() && firstChar !== firstChar.toLowerCase();
         const containsDot = tag.includes('.');
 
         if (containsDot) {
           // dot paths like bar.baz are not ambiguous
           return;
         }
 
-        if (startsWithUpperCase) {
-          // PascalCase element
-          if (isLocal(tag)) {
-            // Local block param starting with uppercase → unambiguous → don't flag
-            return;
-          }
-          // Not a local: check if it shadows HTML element
-          const lowerTag = tag.toLowerCase();
-          if (HTML_ELEMENTS.has(lowerTag)) {
-            context.report({
-              node,
-              messageId: 'shadowed',
-              data: { name: lowerTag },
-            });
-          }
-        } else {
-          // Lowercase element - check if it's a local that shadows HTML element
-          if (isLocal(tag) && HTML_ELEMENTS.has(tag)) {
-            context.report({
-              node,
-              messageId: 'shadowed',
-              data: { name: tag },
-            });
-          }
+        // Only check lowercase elements — a lowercase tag that is a local
+        // block param and also a native HTML element name is shadowed.
+        // PascalCase tags (e.g. <Input>, <Form>, <Select>) are Ember/Glimmer
+        // component invocations and should not be flagged.
+        const firstChar = tag.charAt(0);
+        const isLowerCase =
+          firstChar === firstChar.toLowerCase() && firstChar !== firstChar.toUpperCase();
+
+        if (isLowerCase && isLocal(tag) && HTML_ELEMENTS.has(tag)) {
+          context.report({
+            node,
+            messageId: 'shadowed',
+            data: { name: tag },
+          });
         }
       },
 

tests/lib/rules/template-no-shadowed-elements.js

@@ -25,6 +25,18 @@ ruleTester.run('template-no-shadowed-elements', rule, {
     `<template>
       <CustomForm />
     </template>`,
+    `<template>
+      <Form>Content</Form>
+    </template>`,
+    `<template>
+      <Input @type="text" />
+    </template>`,
+    `<template>
+      <Select @options={{this.options}} />
+    </template>`,
+    `<template>
+      <Textarea @value={{this.text}} />
+    </template>`,
     `<template>
       <div>Content</div>
     </template>`,
@@ -36,43 +48,6 @@ ruleTester.run('template-no-shadowed-elements', rule, {
   ],
 
   invalid: [
-    {
-      code: `<template>
-        <Form>Content</Form>
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Component name "form" shadows HTML element <form>. Use a different name.',
-          type: 'GlimmerElementNode',
-        },
-      ],
-    },
-    {
-      code: `<template>
-        <Input @type="text" />
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Component name "input" shadows HTML element <input>. Use a different name.',
-          type: 'GlimmerElementNode',
-        },
-      ],
-    },
-    {
-      code: `<template>
-        <Select @options={{this.options}} />
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Component name "select" shadows HTML element <select>. Use a different name.',
-          type: 'GlimmerElementNode',
-        },
-      ],
-    },
-
     {
       code: '<template><FooBar as |div|><div></div></FooBar></template>',
       output: null,