[Bug] Ember silently allows malformed HTML 🐻 #19703
Description
🐞 Describe the Bug
Ember accepts malformed closing tags in hbs templates. For example <div>Hello</<div> or <div>Hello</$$/////</<<( ✈️🏝🍜 £190/🐻 )<<}}}}}<div>. (Behaviour is the same for both HTML tags and Glimmer components)
🔬 Minimal Reproduction
https://ember-twiddle.com/26826bed641649699d942a91c01e64f5?openFiles=templates.application%5C.hbs%2C
😕 Actual Behavior
Ember silently ignores he malformed closing tag; builds the app without errors and warnings. In the browser, the characters that were part of the malformed tag (like "
This is somewhat consistent with plain HTML behaviour. If you open a Chrome console and type document.body.innerHTML = '<div>Welcome to this app</$$/////</<<( ✈️🏝:ramen: £190/:bear: )<<}}}}}, Chrome also ignores the malformed bits and inserts a correct closing tag instead. But in this case, Chrome at least keeps the malformed bits but surrounds them with comments. Ember does not seem to do that.
Browsers are very forgiving with malformed HTML, and make an effort to display something. In another example, they let you omit a closing tag: document.body.innerHTML = '<div>This works;'. Chrome handles this, and display a div. But if you try <div>This works in an Ember hbs template, you get a build-time error.
🤔 Expected Behavior
Just like the case of a missing closing tag, a malformed closing tag should produce a build-time error and prevent compilation of the template.
🌍 Environment
- Ember: 3.18.1
- Node.js/npm: -
- OS: Ember Twiddle
- Browser: Chrome
➕ Additional Context
Discovered this during a code review, when something that looked like a syntax error in a template (</<MyComponent>) did not fail the build, nor did it produce a runtime error.