Lit - Render function not deleting/updating manual sub-content

Question

I'm busy migrating a static js/html application to Lit. I'm finding the platform to be the most easy to migrate old static code to a framework.

However, I'm having some big issues where rendered code are modified externally. Let me explain:

  render() {

    return html`

    ${this.chartsData.map((chart) =>

        html`<div id="chart${row.id}">
          <div id="chart_content${row.id}">
          </div> 
        </div>
      
      )}`
}

Now, later on I add content to the "chart_content" divs which are generated from external classes from jquery or basic DOM etc. Very complex code which I cannot add in the render function. Basically I create the content as follows:

var lineChart = new LineChart(`chart_content_${chartId}`);

Porting this to Lit as a Lit-Element is not possible for me as libraries such as Plotly JS does not support Lit.

Lit rendering is basically used to create the "wireframe" content and the detail is added later on for now.

The problem is, when I delete a chart from chartsData such as:

this.chartsData = this.chartsData.filter(x=>x.id != id);

the code from chart_content are not deleted with the rest of the div. It gets pushed into existing chart divs which are not associated with the content. I expected that Lit would delete the chart_content div as well with the main chart container but it does not happen. This of course creates havoc. Honestly I'm not exactly sure what it does, but I'm 100% sure the content is not deleted.

I need a way to tell Lit to associate the sub-div with the main-div and also delete/move the content with the main div where required.

Answer 1

You need to define your array as property.

function add() {
  const list = document.getElementById('list');
  list.addOne();
}

function rm() {
  const list = document.getElementById('list');
  list.removeOne();
}

<script type="module">
import {
  LitElement,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";
import {html, unsafeStatic} from "https://unpkg.com/lit/static-html.js?module";
import {repeat} from "https://unpkg.com/lit/directives/repeat.js?module";

class MyList extends LitElement {
  
  static get properties() {
    return {
      chartsData: {type: Array},
    };
  }
  
  constructor() {
    super();
    this.chartsData = [
      {id: 1, html: '<div style="background-color: blue">1</div>'},
      {id: 2, html: '<div style="background-color: red">2</div>'},
      {id: 3, html: '<div style="background-color: blue">3</div>'},
      {id: 4, html: '<div style="background-color: red">4</div>'},
      {id: 5, html: '<div style="background-color: blue">5</div>'},
      {id: 6, html: '<div style="background-color: red">6</div>'},
    ];
  }
  
  removeOne() {
    this.chartsData.pop();
    this.chartsData = [...this.chartsData];
  }
  
  addOne() {
    const id = this.chartsData.length + 1;
    const html = `<div style="background-color: ${id % 2 ? 'blue' : 'red'}">${id}</div>`;
    this.chartsData.push({id, html})
    this.chartsData = [...this.chartsData];
  }
  
  render() {
    return html`
      ${repeat(this.chartsData, (row, index) => html`<div id="chart${row.id}">
              <div id="chart_content${row.id}">${unsafeStatic(row.html)}</div> 
             </div>`
      )}`
  }
}

customElements.define("my-list", MyList);
</script>
<br/>
<button onclick="add()">Add</button>
<button onclick="rm()">Remove</button>
<br/>
<my-list id=list></my-list>