webcomponent почему элемент выпал из потока?

Задача: организовать максимально простое программное добавление/удаление строк в таблицу.

Мне показалось хорошей идеей использовать для этой цели веб компоненты

Изучил следующие материалы: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

https://developers.google.com/web/fundamentals/web-components/best-practices

https://habr.com/ru/post/346670/

Сделал template, зарегистрировал компонент. Код:

<table >
  строки таблицы
  <row-event RER_time="16:31"></row-event>
</table>

https://codepen.io/ulibka68/pen/oNNwZKG

Сам webcomponent по задумке должен жить внутри таблицы и генерировать одну строку с отображением необходимых данных.

По факту получилось что webcomponent "выскочил" перед таблицей, хотя был в нее вставлен.

Подскажите пожалуйста как поправить код так, чтобы я мог генерировать строки с помощью webcomponent