JSFiddle - React, Tailwind, and code Playground

by gol ngaz²

HTML

<comment-form />

JavaScript

(() => {
    var template = document.createElement('template')

    template.innerHTML = `
<div>
    <div class="head">
        <span>Titre de l'option</span>
        <span>Commentaire à afficher</span>
        <span class="text-center">Chargement</span>
        <span class="text-center">Livraison</span>
        <div class="text-center" style="width: 30px;">
            <button type="button" class="add-commentOptions" title="Ajouter une case">+</button>
        </div>
    </div>
    <div class="content">
    </div>
    <button class="submit" type="submit">Enregistrer</button>
</div>
`

    class CommentForm extends HTMLElement {
        constructor() {
            super();

            this._root = this.attachShadow({mode: 'open'});
            this._root.appendChild(template.content.cloneNode(true));

            this._linesIndex = 0;
        }

        connectedCallback() {
            this._root.querySelector('.add-commentOptions').addEventListener('click', e => this.addLine(e))
            this._root.querySelector('.submit').addEventListener('click', () => this._submit())
        }

        addLine(event) {
            event.preventDefault();

            let line = document.createElement('comment-line');
            line.setAttribute('index', this._linesIndex++)
            line.addEventListener('item-remove', data => this._deleteLine(data.detail))


            this._root.querySelector('.content').appendChild(line);
        }

        /**
         * @param {CommentLine} lineToDelete
         *
         * @private
         */
        _deleteLine(lineToDelete) {
            this._root.querySelector('.content').removeChild(lineToDelete)
        }

        _submit() {
            this._root.querySelectorAll('comment-line').forEach(line => console.log(line.data))
        }
    }

    window.customElements.define('comment-form', CommentForm);
})();(() => {
    const template = document.createElement('template')

    template.innerHTML = `
<div class="row">
   ...