如何定义一个空的自定义 HTML 标签？

Question

我知道我们可以像这样直接创建自定义标签：

<material-button>Cancel</material-button>

但是，我想在不创建自定义元素（网络组件）的情况下使用 空标签。可能吗？

<icon-star>

Answer 1

您只能使用 <icon-star></icon-star>。

不能使用<icon-star>或<icon-star/>，因为它会被解释为开始标签，之后的所有内容都将被解释为子节点。

这是由于自定义元素的初始化方式：作为未知元素，因此解析器无法知道它们是否为空（原子）。只有标准 HTML 元素可以具有属性（<img>、<br>），因为它们在解析时已经知道。

customElements.define( 'icon-star', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '*'
  }
} )

OK: <icon-star></icon-star>
Fail: <icon-star/> Hello
Fail: <icon-star/>

所以实际上您可以对页面的最后一个元素使用仅打开 <icon-star> 语法 :-o

How to define an empty custom HTML tag?