Как использовать пользовательские элементы без дефиса в их названии?

<my-book-elements>
  <book id = "The World according to Garp" />
  <book id = "The war of the worlds" />
  <book id = "Around the world in eighty days" /> 
  Bye Bye World
</my-book-elements>

<script>
  customElements.define('my-book-elements', class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure we can work with the inner DOM nodes
        this.append(...[...this.querySelectorAll("*")].map(node => {
          let book = document.createElement("my-" + node.localName);
          book.id = node.id;
          //node.remove();// not required, innerHTML will replace everything
          return book;
        }));
      });
    }
  });
  customElements.define("my-book", class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<div>${this.id}</div>`;
    }
  });
</script>