CSS pollutes global without <style scoped> or shadow root. Even simpler variant:

    <form>
      <button onclick="form.counter.value -= 1;return false">-</button>
      <input name="counter" value="0">
      <button onclick="form.counter.value = 1 + +form.counter.value;return false">+</button>
    </form>

Custom elements is just a mutation observer with callbacks, can be used with DOM 0 as well:

    class MyCounter extends HTMLElement {
      connectedCallback() {
        this.attachShadow({mode: 'open'}).innerHTML = `<style>...</style><form>...</form>`
      }
    }
    customElements.define('my-counter', MyCounter)