Как убрать div из template?

Question

[Artem0071]

есть template `myHello`:

<div>
   <h2>Hello</h1>
   <p>world</p>
</div>

Затем его добавляю:

<h1>my hello:</h1>
<my-hello><my-hello>

В итоге получается так:

<h1>my hello:</h1>
<div>
   <h2>Hello</h1>
   <p>world</p>
</div>

Как сделать так, чтобы `div` пропал?
Где то видел что так можно, но ссылку потерял..

Answer 1

[Богдан Духевич]

Любой компонент ОБЯЗАН иметь корневой оберточный тег. Без этого никак. Это ограничение есть и в Реакте. Убирать разве что костылями, что не рекомендуется, конечно.

Почитайте про slot в компонентах, можете его использовать для вывода Вашего h1 внутри div, если не хотите вставлять h1 в сам компонент.

Answer 2

[Evgeny Kulakov]

Согласен с предыдущим комментатором, можно использовать слот в вашем компоненте my-hello:

<div>
 <slot name="title"></slot>
 <h2>Hello</h1>
 <p>world</p>
</div>

И далее его использовать:

<my-hello>
  <h1 slot="title">my hello:</h1>
</my-hello>