custom component - Passing data to javascript template literals inside WebComponent without using attributes. (Like in React) -

hi trying find best practice path long complex data javascript template literals inside custom webcomponent. not want pass using attributes because long text , break html.

with react , jsx easy because passing data elements object. when using javascript template literals can pass strings.

i have added example doing trying achieve want know if there better ways of doing

class page extends htmlelement {    update(data) {      this.innerhtml = `<div>                                      <p>id: ${data.id}</p>                                      <p>content: ${data.content}</p>                                    </div>`    }  }  customelements.define('x-page', page);    class book extends htmlelement {    connectedcallback() {      let pagesdata = [{        id: 1,        content: 'some long text'      }, {        id: 2,        content: 'other long text'      }];      this.innerhtml = `${pagesdata.map( data => `<x-page></x-page>` ).join('') }`      this.queryselectorall('x-page').foreach((pageelement, index) => {        pageelement.update(pagesdata[index])      })    }  }  customelements.define('x-book', book);

<x-book></x-book>