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

The usual pattern for these types of cases would be to emit an event from the child component and let the parent do whatever DOM manipulation it needs to do in response to that event rather than having the child component remove itself. Having a component need to manipulate it's context usually ends up in issues like this. — Alan Dávalos, Jan 25 '22 at 05:00
How are you removing the element? For me, removing itself, that sounds like something, you shouldn't do. — Christian, Jan 25 '22 at 07:37

score 0 · Answer 1 · answered Jan 26 '22 at 07:01

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

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

1 Answers1