Using htmlSafe on strings that contain video tags leads to content not being rendered

[spuxx1701]

Hi there! I found an issue with using htmlSafe on strings that contain <video> tags.

Behavior:
When attempting to dynamically render HTML using htmlSafe we can observe incorrect behavior when that string contains a video tag. Everything up to the first video tag will be rendered, while everything that comes ofter that tag will not be rendered into the DOM.

The same content is being rendered correctly if inserted into a template as static content.

Expected behavior:
The HTML should render completely even if containing video tags.

An example:

  get content() {
    const input = `This is visibile
    <video src='the-source-does-not-matter'/>
    
    This is not visible`;
    return htmlSafe(input);
  }

{{this.content}}

A reproduction can be found here: https://stackblitz.com/edit/github-tubbw9?file=app%2Ftemplates%2Fapplication.hbs,app%2Fcontrollers%2Fapplication.js

I would be willing to help if someone could point me into where I should start looking.

[spuxx1701]

As user Windvis let me know in Discord, I was using invalid HTML. The correct HTML for a video tag is <video></video>, not <video/>. 🙈