refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification)#2724
Draft
johanrd wants to merge 3 commits intoember-cli:masterfrom
Draft
refactor: extract isNativeElement util (fix component-vs-HTML-tag misclassification)#2724johanrd wants to merge 3 commits intoember-cli:masterfrom
johanrd wants to merge 3 commits intoember-cli:masterfrom
Conversation
ba7426e to
65be394
Compare
65be394 to
df03481
Compare
…classification) Adds `lib/utils/is-native-element.js` — a shared util for the recurring "is this a native HTML/SVG/MathML element or a component?" question. Uses the authoritative `html-tags` + `svg-tags` + `mathml-tag-names` packages plus scope analysis, mirroring the pattern established by @NullVoxPopuli in ember-cli#2689 (template-no-block-params-for-html-elements). ## Why not heuristics An earlier draft of this PR used a lexical heuristic (PascalCase / `@` / `this.` / dot / `::`). That approach was rejected in the ember-cli#2689 discussion — a lowercase tag CAN be a component in GJS/GTS when its name is bound in scope (`const div = MyComponent; <template><div /></template>`), so heuristics produce both false positives (web components misclassified as native) and false negatives (scope-shadowed tags misclassified as native). Lists + scope handles both correctly. ## What the util does `isNativeElement(node, sourceCode)` returns true iff: - The tag name is in the HTML/SVG/MathML authoritative lists, AND - The tag name is NOT a scope-bound identifier. Returns false for components (PascalCase, dotted, @-prefixed, etc. — none of those tag-name shapes appear in the lists), custom elements (`<my-element>` — accepted false negative; web component namespace is open-ended), and scope-bound identifiers. ## Rules migrated Four rules now share the util: - `template-no-empty-headings` — fixes the `<Article><span>…</span></Article>` misclassification (PascalCase component containing text, previously treated as an empty heading via `.toLowerCase()` lookup). - `template-no-invalid-interactive` — fixes `<Article role="button">` / `<Article tabindex={{0}}>` false positives. - `template-no-arguments-for-html-elements` — previously carried inline copy of the lists+scope pattern (established in ember-cli#2689); now uses the shared util. - `template-no-block-params-for-html-elements` — same. This is the rule that introduced the pattern, now deduplicated. Net: 2 inline copies of the canonical pattern dropped; 2 buggy rules fixed; +173 -57 lines.
df03481 to
e350937
Compare
johanrd
added a commit
to johanrd/eslint-plugin-ember
that referenced
this pull request
Apr 21, 2026
…+ scope) Replace the inline PascalCase-regex isComponentInvocation heuristic with the lists + scope pattern established by @NullVoxPopuli in ember-cli#2689 and canonicalised by 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 — whichever lands first introduces the file; the other rebases to a no-op on it. Heuristic approaches (PascalCase regex, `tag.includes('.')`, etc.) were explicitly rejected in ember-cli#2689 because lowercase tags CAN be components in GJS/GTS when the name is shadowed by a scope binding (`const div = MyComponent; <div />`). Scope analysis catches this; regex heuristics don't. Call site now uses `!isNativeElement(node, sourceCode)` directly to match the canonical usage pattern in ember-cli#2724's migrated rules.
johanrd
added a commit
to johanrd/eslint-plugin-ember
that referenced
this pull request
Apr 21, 2026
…+ 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.
'Native' is overloaded in the web platform context. The util name
remains isNativeElement (common convention in React/Vue/Angular
ecosystems for 'platform-provided, not a component'), but the JSDoc
now explicitly names three alternative meanings of 'native' that
this util does NOT answer:
- 'native accessibility' / 'widget-ness' — interactive-roles.js
(aria-query widget taxonomy)
- 'native interactive content' — html-interactive-content.js
(HTML §3.2.5.2.7 content-model question)
- 'natively focusable' — HTML §6.6.3 sequential focus navigation
This util answers only: is this tag a first-class built-in element
of HTML/SVG/MathML, rather than a component invocation or a
scope-shadowed local binding? Callers compose it with the more
specific utils when they need a narrower question.
… assertion (Copilot review)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is part of a broader a11y parity audit against jsx-a11y / vue-a11y / angular-eslint-template / lit-a11y.
Extracts a shared
isNativeElement(node, sourceCode)util inlib/utils/is-native-element.jsusinghtml-tags+svg-tags+mathml-tag-namespackages + scope analysis. Follows the lists-+-scope pattern @NullVoxPopuli established in #2689.Problem
Two rules had a PascalCase-component misclassification:
<Article role="button">and<Article tabindex={{0}}>were flagged because the rules didnode.tag.toLowerCase()and then looked up in a native-tag set.Two other rules in master (
template-no-arguments-for-html-elements,template-no-block-params-for-html-elements) already used the correct lists-+-scope approach but duplicated the same 6-line block inline. Four identical call sites past the rule-of-three threshold; the plugin's convention is utility-heavy (21 utils, 221 imports across 231 rules).Changes
lib/utils/is-native-element.js— exportsisNativeElement(node, sourceCode)+ELEMENT_TAGS. Returns true iff the tag is in the HTML/SVG/MathML lists AND NOT shadowed by a scope binding. 18 unit tests.template-no-empty-headings— fixes misclassification when a PascalCase component contains text inside a heading.template-no-invalid-interactive— fixes<Article role="button">/<Article tabindex={{0}}>false positive.template-no-arguments-for-html-elements— replaces inline copy with util call.template-no-block-params-for-html-elements— replaces inline copy with util call.Accepted false negatives (consistent with #2689)
Hyphenated custom-element tags like
<my-element>aren't in any allowlist, so rules skip them. Their a11y contract is author-defined.Scope-based detection can't help here: a hyphen isn't valid in JS identifiers, so an import like
import './register-my-element'orimport { MyElement } from 'my-element'doesn't correlate to the template tagmy-element. Only PascalCase bindings (import MyElement from '...'; <MyElement />) work through scope. New rule-level tests pin the custom-element behavior in all 4 migrated rules.Why lists + scope, not heuristics
A previous draft used a lexical heuristic (
^[A-Z]/@/this./ dot /::). Rewritten after the definitive discussion in #2689 — a lowercase tag can legitimately be a component in strict mode when bound in scope, which heuristics can't detect. See that PR's review thread for the full reasoning.Related
Several other a11y rules on separate feature branches will adopt this util in follow-up PRs after they land.
Prior art
Each framework-specific a11y plugin handles the component-vs-native distinction in its parser layer, so no peer has a direct analog of this util. Verified per peer:
components: { MyWidget }in options or<script setup>imports). Rules use Vue's AST node types (VElementvsVText) and Vue's resolver — not a separate heuristic.@Component). Rules use Angular's template AST that has already resolved bindings at parse time.customElements.define(...)— inherently hyphenated lowercase tags. Rules work at the Lit-template level.The closest analog in the plugin itself is #2689, which established the lists-+-scope pattern this util follows.