fix(template-no-block-params-for-html-elements): switch to html-tags/svg-tags + scope

Replaces the inverse component-detection heuristic with a whitelist of
HTML and SVG tag names plus a scope check. With ember-tooling/ember-eslint-parser#189
populating block-param scope in HBS, lists + scope now works in both modes.
Custom elements and unknown lowercase tags remain accepted false negatives.

Author: johanrd

lib/rules/template-no-block-params-for-html-elements.js

@@ -1,34 +1,9 @@
-/** @type {import('eslint').Rule.RuleModule} */
+const htmlTags = require('html-tags');
+const svgTags = require('svg-tags');
 
-// A tag is treated as an HTML element only when it:
-//   - does NOT contain ':' (named blocks like <:slot>)
-//   - does NOT contain '.' (path/namespaced invocations like <foo.bar>)
-//   - does NOT start with '@' (argument invocations like <@foo>)
-//   - has NO uppercase letters (component invocations like <MyThing>)
-//   - does NOT contain '-' (HTML custom elements like <my-element>)
-// Everything else is a component / custom-element / slot — not a plain HTML element.
-function isHtmlElement(tagName) {
-  if (!tagName) {
-    return false;
-  }
-  if (tagName.startsWith('@')) {
-    return false;
-  }
-  if (tagName.includes(':')) {
-    return false;
-  }
-  if (tagName.includes('.')) {
-    return false;
-  }
-  if (tagName.includes('-')) {
-    return false;
-  }
-  if (tagName !== tagName.toLowerCase()) {
-    return false;
-  }
-  return true;
-}
+const ELEMENT_TAGS = new Set([...htmlTags, ...svgTags]);
 
+/** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
     type: 'problem',
@@ -51,19 +26,18 @@ module.exports = {
 
     return {
       GlimmerElementNode(node) {
-        // Check if this is an HTML element (not a component / custom element / slot)
-        if (!isHtmlElement(node.tag)) {
+        if (!ELEMENT_TAGS.has(node.tag)) {
           return;
         }
 
-        // If the tag name is a variable in scope, it's being used as a component, not an HTML element
+        // A known HTML/SVG tag can still be a component if it's bound in scope
+        // (block param, import, local).
         const scope = sourceCode.getScope(node.parent);
         const isVariable = scope.references.some((ref) => ref.identifier === node.parts[0]);
         if (isVariable) {
           return;
         }
 
-        // Check for block params
         if (node.blockParams && node.blockParams.length > 0) {
           context.report({
             node,

package.json

@@ -74,7 +74,8 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "requireindex": "^1.2.0",
-    "snake-case": "^3.0.3"
+    "snake-case": "^3.0.3",
+    "svg-tags": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.9",

pnpm-lock.yaml

@@ -17,10 +17,10 @@ ruleTester.run('template-no-block-params-for-html-elements', rule, {
     '<template><MyComponent as |item|>{{item.name}}</MyComponent></template>',
     '<template>{{#each this.items as |item|}}<li>{{item}}</li>{{/each}}</template>',
     '<template><button>Click</button></template>',
-    // Custom elements (with a dash) are not HTML elements per upstream's
-    // isAngleBracketComponent inverse; they should not be flagged.
+    // Custom elements aren't in the html-tags/svg-tags allowlists, so they're
+    // not flagged. Accepted false negative — web component namespace is open.
     '<template><my-element as |x|>{{x}}</my-element></template>',
-    // Namespaced/path component invocations should not be treated as HTML elements.
+    // Namespaced/path component invocations aren't in the allowlists either.
     '<template><NS.Foo as |x|>{{x}}</NS.Foo></template>',
   ],