lit-extended & HTMLElementTagNameMap integration

[justinfagnani]

lit-extended sets properties instead of attributes by default, and adds the name$= syntax for opting-into attributes.

If would be great to understand the set of valid properties and their types from HTMLElementTagNameMap. Integration with custom elements would be relatively easy then:

import {html, render} from 'lit-html/lib/lit-extended';

class MyElement extends HTMLElement {
  someProp: number;
}
customElements.define('my-element', HTMLElement);
declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement;
  }
}

// this should have a warning under "${'abc'}" for not being a number
html`
  <my-element someProp=${'abc'}></my-element>
`;

// this should have a warning under somProp for not being property of MyElement
html`
  <my-element somProp=${10}></my-element>
`;

// this should have a warning under<my-elemet> for not being a known element
html`
  <my-elemet></my-elemet>
`;

Basically, we want the same features as JSX type-checking. Additionally, it'd be great to have some way to tell tsc the valid attributes for an element.

[tomsdev]

Would be great to make the type definitions extensible the same way that JSX in Typescript is extensible:

declare namespace JSX {
  interface ElementAttributesProperty {
    props: {}; // specify the property name to use
  }
  interface IntrinsicElements {
    'my-element': MyElement;
  }
}

See the full TSX documentation: https://www.typescriptlang.org/docs/handbook/jsx.html