How can I force a re-render of a lit-element grandchild?

I have the following structure

<my-app>
   <my-modal> <!-- 
     <my-form></my-form>
   </my-modal>
</my-app>

my-modal is designed as a generic wrapper, which I use to wrap many different dialogues within my app. In it I listen for a location change, and render html '<slot></slot>'

My problem is that, although my-modal is behaving correctly by showing and hiding the form, the form itself is never re-rendered, and so is always displayed showing stale content. I am currently kludging something using IntersectionObserver to fire when visible, but this feels really hacky and is causing other issues.

Is there a way that my-modal can force its children to re-render, even though the only child it knows about is <slot></slot>. I don't want my-app to know anything about my-modal's behaviours.

Solution

Might not fit

I don't want my-app to know anything about my-modal's behaviours

but you could add a function requestFullUpdate to my-modal which then iterates over all children and does a requestUpdate for all of them. Could be done on open/close or so... or even in an interval :p

However, I have a feeling that this just cures a "side effect" from an unfitting structure... maybe try to look at it from a different perspective - maybe something like this? https://stackoverflow.com/a/56297264/3227915