Удаление светового элемента, воссоздание / рендеринг? - PullRequest
Новая
       35

Удаление светового элемента, воссоздание / рендеринг?

0 голосов
/ 18 июня 2020

Попытка: (1) удалить содержимое контейнера (div); (2) визуализировать компонент светового элемента в этот контейнер; (3) повтор ... Вот код: 

let count = 1;

window.customElements.define('ibp-app', class extends LitElement {
  render() { 
    console.log("{#}ibp-app render.");
    return html`<h3>Hello World! -- ${count++}</h3>`;
  }
}); //ibp-app

window.renderToContainer = function () {
  console.log("{#}renderToContainer");
  document.getElementById('container').innerHTML = ''; //clear container

  //Two cases: #1 works,  #2 doesn't!
    // #1: works, but can't use lit-html template syntax
    //document.getElementById('container').innerHTML = '<ibp-app></ibp-app>';

    // #2: doesn't work; after first time, ibp-app not rendered.
    render( html`<ibp-app></ibp-app>`, document.getElementById('container'));
}  

render(
  // Renders a container followed by button.  Each press of button
  // will call renderToContainer to clear the container, then put
  // an new ibp-app component into the container.
  html`
    <div id="container">(Empty Container)</div>
    <button @click=${renderToContainer}>Render to #containter</button>
  `,
  document.getElementById('content')
);

При первом нажатии кнопки компонент ibp-app заменяет исходный текст контейнера; но при дальнейшем нажатии кнопки оставить контейнер пустым. Похоже, есть что-то "интересное" в удалении компонента с освещенным элементом и его воссоздании, которое я пропустил.

...