my-tag.html

<my-tag>
  <h1>Counter</h1>
  <p>{ count }</p>
  <div class="buttons">
    <button onclick="{ increment }">+</button>
    <button onclick="{ decrement }">-</button>
  </div>
  <script>
    const { useState } = uhooks

    export default withHook((props) => {
      const [count, setCount] = useState(Number(props.count))

      const increment = () => setCount(count + 1)
      const decrement = () => setCount(count - 1)

      return {
        count,
        increment,
        decrement
      }
    })
  </script>
  <style>
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
      padding: 2rem;
      min-width: 25vw;
      border-radius: 1rem;
      text-align: center;
      box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
    }

    h1 {
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.6rem;
      margin-top: 0;
    }

    .buttons {
      display: flex;
      grid-gap: 0.5rem;
    }

    button {
      cursor: pointer;
      color: white;
      background: #0f1731;
      border: none;
      font-size: 1.8rem;
      width: 4rem;
      height: 4.2rem;
      border-radius: 0.4rem;
    }

    button:hover, button:focus-visible {
      background: #1FADC5;
    }
  </style>
</my-tag>