import { setInterval } from '../node_modules/ecmassembly/assembly/setInterval' ; import { customElements , HTMLElement , ShadowRootInit } from '../node_modules/asdom/assembly/index' ; import { log } from './imports' ; let count = 0 ; const elements = [ ] ; setInterval ( ( ) => { count ++ ; for ( let i = 0 , l = elements . length ; i < l ; i ++ ) elements [ i ] . update ( ) ; } , 1000 ) ; export class SecondsCounter extends HTMLElement { static observedAttributes : string [ ] = [ 'some-attribute' ] ; constructor ( ) { super ( ) ; log ( 'AS: <seconds-counter> constructed' ) ; } connectedCallback ( ) { log ( 'AS: <seconds-counter> connected' ) ; elements . push ( this ) ; if ( ! this . shadowRoot ) this . attachShadow ( { mode : 'open' } as ShadowRootInit ) ; this . shadowRoot ! . innerHTML = this . template ( ) ; this . countOutput = this . shadowRoot ! . querySelector ( 'strong' ) as HTMLElement ; } disconnectedCallback ( ) { log ( 'AS: <seconds-counter> disconnected' ) ; elements . splice ( elements . indexOf ( this ) , 1 ) ; } attributeChangedCallback ( name , oldVal , newVal ) { if ( newVal == 'bar' ) { log ( 'AS: some-attribute has a bar value!' ) ; } else { log ( 'AS: some-attribute has some other value!' ) ; } } countOutput : HTMLElement | null = null ; template ( ) { return `
			<style>
				:host { display: block; }
				.content { padding: 3px; color: white; background: deeppink; }
			</style>
			<span>
				I am a custom &lt;seconds-counter&gt; element. The seconds count is <strong>${ count }</strong>!
				${ this . childNodes . length ? `Distributed content: <span class="content"><slot></slot></span>` : '' }
			</span>
		` ; } update ( ) { this . countOutput ! . innerText = count . toString ( ) ; } } customElements . define ( 'seconds-counter' , ( ) => new SecondsCounter ( ) , SecondsCounter . observedAttributes ) ;