HTML 在 <select 的 <option> 中 size="?" Angular 编译的列表未显示在 Chrome 中

Question

我有一个简单的 Angular 组件

@Component({
  selector: 'hello',
  template: `Hello!`,
})
export class HelloComponent  {
}

我想显示在 <select> 列表中

<select size="2">
  <option value="1">
    <hello></hello>
  </option>
</select>

输出：它是可选的并且在 DOM 但空白。

如果我删除 size="2" 它会完美运行，但我想要一个列表而不是下拉列表。

我错过了什么？

编辑

正如@PoulKruijt 评论的那样，这不仅限于 Angular 组件，当 <select> 具有 size 当使用 Angular.

时

Answer 1

我最终打开了一个带有 Angular 的错误报告，该错误报告在 15 分钟内关闭，解释如下：

tag is invalid as a child of element, see: Problem with <h1> in drop down menu?

If you compare DOM of the "working" example you will notice that is not there as HTML parser removed it. Angular creates elements through the DOM API so a HTML parser couldn't do the auto-corrections for you.

Still, the bottom line is that you've got invalid HTML.

上下文：工作示例很简单HTML我写了部分错误报告。 https://stackblitz.com/edit/angular-issue-repro2-ue9hrn?embed=1&file=src/index.html

HTML 在 <select 的 <option> 中 size="?" Angular 编译的列表未显示在 Chrome 中

HTML in an <option> of <select size="?" list compiled by Angular not showing in Chrome

html

rendering

angular