JSFiddle - React, Tailwind, and code Playground

HTML

<!--source: https://github.com/mdn/web-components-examples-->
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>Editable List | Web Components</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <editable-list
        title="TODO"
        list-item-0="First item on the list"
        list-item-1="Second item on the list"
        list-item-2="Third item on the list"
        list-item-3="Fourth item on the list"
        list-item-4="Fifth item on the list"
        listItem="This will not appear"
        add-item-text="Add new list item:"
    >
    </editable-list>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

CSS

/*source: https://github.com/mdn/web-components-examples*/

html {
    font-size: 90%;
}

body {
    color: #2b2b2b;
    font-family: sans-serif;
    margin: 0 auto;
    max-width: 350px;
    padding-top: 5rem;
}

JavaScript

// source: https://github.com/mdn/web-components-examples

'use strict';

(function() {
  class EditableList extends HTMLElement {
    constructor() {
      // establish prototype chain
      super();

      // attaches shadow tree and returns shadow root reference
      // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
      const shadow = this.attachShadow({ mode: 'open' });

      // creating a container for the editable-list component
      const editableListContainer = document.createElement('div');

      // get attribute values from getters
      const title = this.title;
      const addItemText = this.addItemText;
      const listItems = this.items;

      // adding a class to our container for the sake of clarity
      editableListContainer.classList.add('editable-list');

      // creating the inner HTML of the editable list element
      editableListContainer.innerHTML = `
        <style>
          li, div > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .icon {
            background-color: #fff;
            border: none;
            cursor: pointer;
            float: right;
            font-size: 1.8rem;
          }
        </style>
        <h3>${title}</h3>
        <ul class="item-list">
          ${listItems.map(item => `
            <li>${item}
              <button class="editable-list-remove-item icon">&ominus;</button>
            </li>
          `).join('')}
        </ul>
        <div>
          <label>${addItemText}</label>
          <input class="add-new-list-item-input" type="text"></input>
          <button class="editable-list-add-item icon">&oplus;</button>
        </div>
      `;

      // binding methods
      this.addListItem = this.addListItem.bind(this);
      this.handleRemoveItemListeners = this.handleRemoveItemListeners.bind(this);
      this.removeListItem = this.removeListItem.bind(this);

      // appending the...