javascript - Lit-Element:哪个事件用于 DOM 更新？

Question

文档位于 github.com/Polymer/lit-element描述生命周期，如果某个 lit 元素的属性发生变化。但是，如果元素的 DOM 内容发生更改，我似乎找不到任何关于生命周期的文档。

所以假设我有一些嵌套的 DOM 结构，我的最外层元素应该根据 DOM 内容显示一些东西。为了简单起见，下面的示例将只显示给定类型的子元素的数量。

现在我的应用程序在某个时候插入了一个新的嵌套元素(单击下面的 test 按钮)。此时我想更新显示的计数。

从我的测试来看，在这种情况下似乎不会再次调用 render()，updated() 也不会。

我需要监听哪个事件或者我需要实现哪个函数来识别这种变化？

我目前唯一的解决方法是在 DOM 更新后手动使用 requestUpdate()，但我认为此类更改应由 lit-element 本身处理。

  document.querySelector( 'button' )
          .addEventListener( 'click', () => {
            const el = document.querySelector( 'my-element' );
            el.insertAdjacentHTML( 'beforeend', '<my-nested-element>new addition</my-nested-element>' );
          })

my-element, my-nested-element {
  display: block;
}

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>

<!-- Works only on browsers that support Javascript modules like Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

  class MyElement extends LitElement {
    constructor(){
      super();
      this.number = this.querySelectorAll( 'my-nested-element' ).length;
    }
  
    render() {
      return html`<p>number of my-nested-element: ${this.number}</p> 
                  <slot></slot>`;
    }  
  }
  customElements.define('my-element', MyElement);
  
	class MyNestedElement extends LitElement {
    render() {
      return html`<slot></slot>`;
    }  
  }
  customElements.define('my-nested-element', MyNestedElement);
</script>

<my-element>
  <my-nested-element>first</my-nested-element>
  <my-nested-element>second</my-nested-element>
</my-element>

<button>test</button>

Answer 1

为了检测通过 <slot> 从 Light DOM 插入的新元素元，可以听slotchange <slot> 上的事件元素，或 Shadow DOM 根本身。

请看下面的运行示例:

document.querySelector('button').onclick = () => 
  document.querySelector('my-element').insertAdjacentHTML('beforeend', '<my-nested-element>new addition</my-nested-element>');
  

my-element,
my-nested-element {
  display: block;
}

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

  class MyElement extends LitElement {
    firstUpdated() {
      var shadow = this.shadowRoot
      var nb = shadow.querySelector( 'span#nb' )
      shadow.addEventListener( 'slotchange', () => 
        nb.textContent = this.querySelectorAll( 'my-nested-element').length 
      )    
    }
    render() {
      return html`<p>number of my-nested-element: <span id="nb"></span></p> 
                  <slot></slot>`;
    }  
  }
  customElements.define('my-element', MyElement);
</script>

<my-element>
  <my-nested-element>first</my-nested-element>
  <my-nested-element>second</my-nested-element>
</my-element>

<button>test</button>