lit-html preparation and conversion

[wkeese]

Convert from handlebars templates to lit-html templates. Depends on #520. Also has the following preparation steps:

Stop referencing containerNode

One common anti-pattern we have is

myNode.containerNode.innerHTML = …

or

myNode.containerNode.appendChild(…);

This won’t work with lit-html, and doesn’t even work very well now, since you have to first call deliver() or similar to make sure the containerNode has been created.

A better approach is to enhance delite/Container to have a content property, which can be set to a Node, or perhaps DocumentFragment or string, and internally that sets the containerNode content in refreshRendering().

Then, as documented in https://lit-html.polymer-project.org/guide/template-reference, for lit-html templates, rather than:

<div attach-point=“containerNode></div>

they will have:

<div>${content}</div>

And then client code can do:

myNode.content = …

FormWidget, FormValueWidget

All the stuff like moveAriaAttributes, and propagating values like disabled, required, etc. to the focusNode don’t work with templates, because you shouldn’t manually update the DOM.

Also click handlers?

Update all the templates to handle that stuff manually:

<template>
   <input class=“focus-node” id=“{{this.id ? this.id + ‘input’ : ‘’}}” name=“{{name}}” placeHolder=“{{placeHolder}}” tabindex=“{{tabIndex}}” disabled=“{{disabled}}” readonly=“{{readonly}}” aria-label=“{{ariaLabel}}” aria-labelledby=“{{ariaLabelledBy}}” on-click=“{{…}}”>
</template>

Remove usage of other attach-points

Widgets using attach-point don’t translate well into using lit-html.  HasDropDown etc. Needs lots of thought / work.

Switch to ESLint

ESLint has a plugin for listing HTML literals.