I'm not a particular clever frontend-dev but i need to maintain and enhance two webcomponents which are used to show a table and rows in that table.

It worked fine so far. The table-element is querying a json-api on the server-side and it's creating <tx-row> elements on the fly like:

for (let tx of txlist) {
       let txRow = document.createRange().createContextualFragment(`
         <tx-row
          data-price="${this.price ? this.price : 0}"
          // many more attributes here
         </tx-row>
       `)
       this.tbody.append(txRow);
       // ...
}

So now i want to adjust that and make it reusable. In my case i want to add an optional first column where each row gets a checkbox which should call some javascript code.

If this would only be one component, slots would probably already solved my issue. However here i would need to somehow pass the slot further down in the tx-row and it doesn't sound like rocket-science but rather something very simple but i can't figure it out.

If this is easy if i would use XYZ-framework, i really hope that this framework is pretty slim. You know ... frontend-developmenet doesn't look to me as it would have evolved much from the state of 2016.

But nevertheless, any hint highly appreciated! E.g. if anyone can point to a place where something similiar is solved already.