How to Custom Element without affecting layout

Let’s say you have an counter-button elements like:

<counter-buttons>
  <button>-</button>
  <input type="number" readonly disabled />
  <button>+</button>
</counter-buttons>

But you don’t want to affect layout. Remember that display: contents we heavily used for the HTML Tables as CSS Grid ?

<style>
  counter-buttons {
    display: contents;
  }
  .container {
    display: flex;
    gap: 1rem;
  }
</style>
<div class="container">
  <counter-buttons>
    <button>-</button>
    <input type="number" readonly disabled />
    <button>+</button>
  </counter-buttons>
</div>

Yey, our button/input/button group is spaced as before wrapping them in a <counter-buttons> 🙌