sveltejs / eslint-plugin-svelte

ESLint plugin for Svelte using AST
https://sveltejs.github.io/eslint-plugin-svelte/
MIT License
306 stars 38 forks source link

Detect invalid HTML elements #913

Open benglewis opened 1 week ago

benglewis commented 1 week ago

Motivation

I found that in Svelte 4.0, we had used the following syntax:

<head>
  <script>...</script>
</head>

<svelte:head>
   <title>...</title>
</svelte:head>

<div>
</div>

But it turns out that in Svelte 5.0 (and officially even before Svelte 5.0, even though it worked :P) this is not valid syntax.

Description

The idea is to have a list of Svelte tags (known as "Special elements" in the Svelte docs) which are only supported with the svelte: syntax, e.g. head, body, window, document, element and to automatically notify the user if they are incorrect using these tags without the svelte: prefix. AFAIK, the linter already blocks components from using lower-case names (component-name-lowercase), so I believe that this rule would be exceedingly unlikely to trigger false positives.

Examples

<script>
</script>

<!-- ✓ GOOD -->
<svelte:head>
...
</svelte:head>

<!-- ✗ BAD -->
<head>
...
</head>

Additional comments

No response