Skip to content

Detect invalid HTML elements #913

@benglewis

Description

@benglewis

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions