Skip to content

ESlint-plugin-compat doesn't seem to be able to accurately flag errors for methods on HTMLElements #651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gwyneplaine opened this issue Mar 25, 2025 · 1 comment

Comments

@gwyneplaine
Copy link

gwyneplaine commented Mar 25, 2025

It seems at the very least the plugin has trouble detecting callExpressions on HTMLElements.

/* This errors as expected with:
HTMLElement.attachInternals() is not supported in iOS Safari 15.6-15.8eslint[compat/compat](https://github.com/amilajack/eslint-plugin-compat/blob/master/docs/rules/compat.md)
*/

globalThis.HTMLElement.attachInternals();

/* None of these cases error despite clearly either:
*  a) extending the `HTMLElement` object interface or 
*  b) straight up being an instance of HTMLElement 
*/
const x = globalThis.HTMLElement;
new x().attachInternals();

const foo = document.createElement('custom-element');
foo.attachInternals();

class y extends HTMLElement {
    constructor () {
        this.attachInternals();
    }
}

new y().attachInternals();

Looking through the source code, it seems like the algorithm we're using to match for failing rules in lintMemberExpression isn't able to match failingRules on these cases.

  const foo = document.createElement('custom-element');
  foo.attachInternals();

The expected rule.object here is HTMLElement, rule.property attachInternals()
The evaluated node object name is foo, node property attachInternals()
This fails the failingRule check on line 170

class y extends HTMLElement {
    constructor () {
        this.attachInternals();
    }
}

The expected protochainId here is HTMLElement.attachInternals() the evaluated protochainId is attachInternals()
It seems we're unable to evaluate / not evaluating the superclass of the ClassDeclaration represented by the ThisExpression. This fails the failingRule check on line 156

Notably I get the same issue with other callexpressions on HTMLElement such as hidePopover and showPopover

Though given the above examples I've given, this may be a larger problem with matching failing rules on memberExpressions.

I've created a minimal reproduction case here.
This leverages the latest version of this package with eslint@8.57.1, notably the same issue occurs with eslint@9.23.0

@angelikatyborska
Copy link

angelikatyborska commented Mar 25, 2025

I'm not sure if this is related, but I'm experiencing problems with usages of Element.checkVisibility not being reported.

I expected this code to trigger the error:

const checkForOverflow = (target HTMLDivElement) => {
  const isVisible = target.checkVisibility();
};

but it doesn't.

This code also doesn't trigger it:

(new HTMLElement()).checkVisibility();
/* or */
const div = document.createElement('div')
div.checkVisibility();

The only way to trigger that error is to write:

Element.checkVisibility();
/* or */
(new Element()).checkVisibility();

If this is not related to the original issue, let me know and I'll open a separate issue for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants