我怎样才能强制重新渲染一个点燃元素的孙子？

Question

我有以下结构

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

my-modal 被设计为通用包装器，我用它来包装我的应用程序中的许多不同对话。我在其中监听位置变化，render html '<slot></slot>'

我的问题是，尽管 my-modal 通过显示和隐藏表单表现正确，但表单本身永远不会重新呈现，因此总是显示陈旧的内容。我目前正在拼凑一些使用 IntersectionObserver 在可见时触发的东西，但这感觉真的很笨拙并且会导致其他问题。

有没有办法让 my-modal 强制其子项重新渲染，即使它知道的唯一子项是 <slot></slot>。我不想 my-app 知道任何关于 my-modal 的行为。

Answer 1

可能不适合

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

但您可以将函数 requestFullUpdate 添加到 my-modal，然后迭代所有子项并为所有子项执行 requestUpdate。可以在 open/close 左右完成...甚至可以间隔 :p

但是，我有一种感觉，这只是从不合适的结构中治愈了 "side effect"...也许尝试从不同的角度来看待它 - 也许是这样的？

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