Is there a way to sync the Lit cached DOM with the actual DOM?

Question

I'm using Lit to built my front-end UI components. I'm also making use of an internal company design system that defines its own web components. My problem is that one of these internal web components can directly remove itself from the DOM when the user hits a 'close' button on it. Lit doesn't know this happened, and if I re-render my component, it doesn't work. Is there a way to somehow manually indicate to Lit that the real DOM has changed and to sync its cache?

For example, this is a simplified version of the render method for my LitElement web component:

render(): TemplateResult {
  return html`
    <div ... >
      <div ... >
        <internal-component ... >
        </internal-component>
      </div>
    </div>
  `;
}

The 'internal-component' does its own thing and renders a 'close' button that when clicked, directly removes itself from its parent element in the DOM. It does issue an event that this happened, but if I call 'requestUpdate' to re-render, Lit doesn't re-render the internal-component. If there was a Lit API I could call during that close event that says 'sync your cache with the actual DOM', then it might work.

Thanks in advance!

- Steve

Answer 1

You should link the rendering of your internal component with a reactive property or a state

@state()
isInternalComponentVisible:boolean = true

render(): TemplateResult {
  return html`
    <div ... >
      <div ... >
        ${this.isInternalComponentVisible ? 
          html`<internal-component @onClose=${() => {this.isInternalComponentVisible = false } } ... >
        </internal-component>` : html``}
        
      </div>
    </div>
  `;
}

Then you can later set the state to true render the internal component again: this.isInternalComponentVisible = true

Even if the component removes itself, this helps lit to be in sync with dom