如何强制重新渲染发光元素的孙子？答案

【问题标题】：How can I force a re-render of a lit-element grandchild?如何强制重新渲染发光元素的孙子？
【发布时间】：2019-05-23 09:19:21
【问题描述】：

我有以下结构

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

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

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

有没有一种方法可以让 my-modal 强制其子级重新渲染，即使它知道的唯一子级是 <slot></slot>。我不想让my-app 知道my-modal 的行为。

【问题讨论】：

【解决方案1】：

可能不适合

我不希望 my-app 了解有关 my-modal 行为的任何信息

但您可以将函数requestFullUpdate 添加到my-modal，然后迭代所有子代并为所有子代执行requestUpdate。可以在打开/关闭时完成......甚至在间隔内完成：p

但是，我有一种感觉，这只是从不合适的结构中解决了“副作用”......也许尝试从不同的角度看待它 - 也许像这样？ https://stackoverflow.com/a/56297264/3227915

【讨论】：