Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Check for unrecognized elements #36

Open
MarkTiedemann opened this issue Sep 17, 2024 · 4 comments
Open

Check for unrecognized elements #36

MarkTiedemann opened this issue Sep 17, 2024 · 4 comments
Labels
contributor-friendly

Comments

@MarkTiedemann
Copy link

MarkTiedemann commented Sep 17, 2024 •
edited
Loading 

<!DOCTYPE html>
<abr></abr>

The above code is accepted even though it contains a typo: <abr> should be <abbr>.

I think it'd be helpful if this extension would check for unrecognized elements and show an error in case it encounters one.

Note that, if this were implemented, there'd have to be an escape hatch for custom elements (e. g. <my-button>), preferably using something like VS Code Custom Data.
@nobkd
Copy link

nobkd commented Sep 17, 2024

Just my opinion on this:
I personally don't like this, because I work with projects, where there are custom components, which are used just like HTML elements.
I wouldn't want to add each element in my project to some list, to not highlight some issue with it.
If there would be an option to enable/disable checking for element names, I would be fine with the general idea.

@MarkTiedemann
Copy link
Author

@nobkd Are your projects not using HTML Custom Data? If so, how do you get autocomplete for your custom elements?

I feel like HTML Custom Data is quite a solid standard for making web components easy to use for other developers.

Stencil, for example, can generate this data out of the box: https://stenciljs.com/docs/docs-vscode

@nobkd
Copy link

nobkd commented Sep 20, 2024

Yeah, you're probably right. Thanks for the links!

@kristoff-it
Copy link
Owner

Before thinking of editor specific integration, I would be open to adding a flag to the CLI to enable element name checking.

If anybody wants to work on it, feel free to ask for guidance in here.

For starters, I see three main modes:

  • No checking (current behavior)
  • Standard HTML elements only (including svg and mathml)
  • Standard HTML elements + allowing web components (so allowing elements with a dash)

Once this is in place, then we can consider how to implement custom setups where we add more restrictions on web components or enable support for specific frontend frameworks that define their own elements, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contributor-friendly
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kristoff-it @MarkTiedemann @nobkd