import { TemplateResult } from 'lit' ; import { DirectiveResult } from 'lit/directive' ; import { render , UllrElement } from './lib/element' ; type Props = Array < string | null > ; export type Templatable = TemplateResult | DirectiveResult ; export const customElements = ( template , observedAttributes = [ ] ) : typeof UllrElement => class extends UllrElement { props : Props ; constructor ( ) { super ( ) ; this . props = [ ] ; } static get observedAttributes ( ) : string [ ] { return observedAttributes ; } attributeChangedCallback ( name , _ , next ) { const index = observedAttributes . findIndex ( ( n ) => n === name ) ; this . props [ index ] = next ; if ( this . connected ) { this . _render ( ) ; } } connectedCallback ( ) { super . connectedCallback ( ) ; this . _render ( ) ; } _render ( ) { render ( template ( this . props ) , this ) ; } } ;