lit-element update bug II

by sorvell1

HTML

<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">
'use strict';

import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

export default class Test extends LitElement {

  static get properties() {
    return {
      name:  	 { type: String  },
      checked: { type: Boolean },
    };
  }

  constructor() {
    super();
    this.name 		= 'name';
    this.checked 	= false;
  }

  render() {
    return html`
      <div>
        <input type="checkbox" .checked="${this.checked}" @click="${this.onClick}" />
        ${this.name} | value: ${this.checked ? 'truthy' : 'falsy' }
      </div>
    `;
  }

  onClick( e ){
  	this.checked = e.target.checked;
    this.dispatchEvent( new CustomEvent( 'change' ) );
  }
}

customElements.define( 'x-test', Test );
</script>

<x-test name="el 1"></x-test>
<x-test name="el 2"></x-test>
<x-test name="el 3"></x-test>
<x-test name="el 4"></x-test>
<div></div>

<script>
  function listener(e){
    const target	= e.target,
    		  checked = target.checked;
    const els = document.querySelectorAll( 'x-test' );
    for( const el of els ) {
      if( el !== target ) {
      	el.checked = checked;
      }
    }
  }
	const els = document.querySelectorAll( 'x-test' );
  for( const el of els ) {
    el.addEventListener( 'change', listener );
  }
  
  document.querySelector( 'body' )
  	.addEventListener( 'change', () => document.querySelector( 'div' ).innerHTML = '"change" fired on body' );
  
</script>