Skip to content
This repository was archived by the owner on Sep 18, 2023. It is now read-only.

custom-elements/extends-correct-class should check if the parent class extends HTMLElement #32

Closed
maicol07 opened this issue Sep 6, 2021 · 6 comments · Fixed by #38
Closed

custom-elements/extends-correct-class should check if the parent class extends HTMLElement #32

maicol07 opened this issue Sep 6, 2021 · 6 comments · Fixed by #38

Comments

@maicol07
Copy link

maicol07 commented Sep 6, 2021

Currently, custom-elements/extends-correct-class checks if the custom element extends HTMLElement. However, it triggers an error if the class I want to extend extends HTMLElement.

Example:

class A extends HTMLElement {}

class B extends A {}

if (!window.customElements.get('custom-el')) {
  window.customElements.define('custom-el', B);
}
@keithamus
Copy link
Contributor

Hey @maicol07 thanks for the issue!

I believe this would be too difficult to track properly with eslint, as tracking the inheritance chain project wide would get too complex too quickly. For example base class could sit across dependency boundaries. I would suggest inviting that much complexity into your codebase probably warrants turning this rule off.

If you have some ideas around how we can avoid such complexity I'd be open to suggestions. We could perhaps add a list of allowed classes that these elements can inherit from, as an option.

I'll close this issue for now, as in it's current form I don't think we can do much. If you disagree, or think there's a particular direction we should go in, I'd be happy to re-open it and investigate further.

@maicol07
Copy link
Author

@keithamus the withelist option would be okay for my use case!

@keithamus keithamus reopened this Sep 22, 2021
@keithamus
Copy link
Contributor

Great! Would you like to work on a PR for this?

@maicol07
Copy link
Author

Actually, I don't know how custom rules work 😅

However, I can look at it when I have time!

@mbullington
Copy link
Contributor

I can try picking this up!

I've noticed many other rules rely on extending HTMLElement directly, too. Having a whitelist would be great for our use-cases.

mbullington added a commit to mbullington/eslint-plugin-custom-elements that referenced this issue Feb 8, 2022
@mbullington
feat: ✨ Option allowedSuperNames for extends-correct-class
c544f13 
github#32
mbullington added a commit to mbullington/eslint-plugin-custom-elements that referenced this issue Feb 8, 2022
@mbullington
feat: ✨ Option allowedSuperNames for extends-correct-class
40f76c2 
github#32
@mbullington
Copy link
Contributor

@keithamus I ended up creating a few small PRs that include this work, but also other things I noticed when trying to use the plugin in a production environment.

When you have time would be great if you could look. If the decisions I made in the PR aren't right for the project, that's totally okay.

happy to work with you on this!

@mbullington mbullington mentioned this issue Feb 8, 2022
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add option allowedSuperNames for extends-correct-class mbullington/eslint-plugin-custom-elements
3 participants
@keithamus @mbullington @maicol07