Как определить пустой пользовательский тег HTML? - PullRequest
Новая
       71

Как определить пустой пользовательский тег HTML?

1 голос
/ 09 мая 2020

Я знаю, что мы можем создавать настраиваемые теги напрямую следующим образом: 

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

Однако я хотел бы использовать пустой тег без создания настраиваемого элемента (веб-компонента). Возможно ли это? 

<icon-star>

1 Ответ

3 голосов
/ 09 мая 2020

Вы можете использовать только <icon-star></icon-star>.

Вы не можете использовать <icon-star> или <icon-star/>, потому что он будет интерпретироваться как открывающий тег, а все содержимое после него будет интерпретироваться как дочерние узлы.

Это связано с тем, как инициализируются пользовательские элементы: как неизвестный элемент, поэтому синтаксический анализатор не может знать, пусты они (atomi c) или нет. Только стандартные элементы 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

...