class InputPlusMinus extends HTMLElement {

  connectedCallback() {
    let template = document.querySelector('#input-plus-minus-template').content;
    this.attachShadow({
      mode: 'open'
    }).appendChild(template.cloneNode(true));

    let add_button = this.shadowRoot.querySelector("#add");
    let subtract_button = this.shadowRoot.querySelector("#subtract");
    let count_textbox = this.shadowRoot.querySelector("#count");

    this.setAttribute('value', '1');

    add_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      count_textbox.value = current + 1;
      this.setAttribute('value', count_textbox.value);
    });

    subtract_button.addEventListener('click', () => {
      let current = parseInt(count_textbox.value, 10);
      if (current > 1) {
        count_textbox.value = current - 1;
        this.setAttribute('value', count_textbox.value);
      }
    });
  }
}

customElements.define('input-plus-minus', InputPlusMinus);

<template id="input-plus-minus-template">
            <style>
            button {
                width: 25%;
                /* other CSS */
            }
        
            input {
                width: 50%;
                /* other CSS */
            }
            </style>
            <div id="container">
                <button id="subtract">-</button>
                <input type="text" id="count" value="1" readonly />
                <button id="add">+</button>
            </div>
        </template>


<!-- custom element being used -->
<input-plus-minus id="sample"></input-plus-minus>