I have a reusable modal component where I can pass content into a slot. I've added an instance of it on my page, like:
<c-modal> <slot>Sample modal content</slot> </c-modal>
I also have a datatable with rows of user data. I want to add a button in the last column to view details of the row the button is in. When I click that button, I want it to open the modal I have (above) but dynamically populate data in the main content (right now it's obviously just hard-coded text "Sample modal content").
For example, clicking the button in one of the rows would open the modal with this content, for example:
You've selected user with id 39. The user's name is John Smith, email email@example.com
What's the best way to do this?
(here's what I have so far: https://webcomponents.dev/edit/HzXoPNfny8OZBQ0AKoLT/src/todo.html)