Question

github.com/Polymer/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>元素或Shadow DOM根目录本身上的slotchange事件

请参见下面的运行示例：

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>

点亮元素：哪个事件用于DOM更新？

1 个答案: