Define 'tagName' values in Element interfaces to prevent misleading type acceptance.

Bug Report

🔎 Search Terms

• HTML Element Interfaces
• Element tagName
• Element Interfaces
• Incorrect element types accepted

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about Element interfaces

⏯ Playground Link

Playground link with relevant code

💻 Code

// Elements can be assigned to variables of other element types because of interface overlaps being sufficient.
let element: HTMLSpanElement = document.createElement("div");

// If the interfaces included the appropriate 'tagName' property this could be avoided...
let spanElement: HTMLSpanElement & { tagName: "SPAN" } = document.createElement("div") as HTMLDivElement & { tagName: "DIV" };

🙁 Actual behavior

e.g. 'HTMLDivElement' instance can be assigned to variables of type 'HTMLSpanElement'.

🙂 Expected behavior

This should fail the type checking to avoid accidentally assigning elements of an incorrect type.

Start with the linked TypeScript Playground reproduction and inspect the HTML Element interfaces involved, especially tagName on HTMLSpanElement and HTMLDivElement. Done means an HTMLDivElement is no longer accepted as an HTMLSpanElement, while the shown tagName intersection behavior remains represented accurately.