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

Question

github.com/Polymer/lit-element 上的文档描述了生命周期，如果某个 lit-element 的属性发生了变化。但是，如果元素的 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 插入的新元素，您可以在 <slot> 元素上监听 slotchange 事件，或者在 Shadow DOM root 本身上。

请参阅下面的运行示例：

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>

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

Lit-Element: which event to use for DOM updates?

javascript

web-component

lit-element