Add this.$ to LitElement as it's still very light-weight but usefule

Polymer has this.$ as a convenient way to access all shadow root elements with an id defined, by id. This can be easily added to LitElement as:

constructor() {
	super(...arguments);
	this.__renderComplete = null;
	this.__resolveRenderComplete = null;
	this.__isInvalid = false;
	this.__isChanging = false;

	// Add support for this.$
	this.$ = {};
}

ready() {
	this._root = this._createRoot();
	super.ready();

	// Add support for this.$
	for( const el of this._root.querySelectorAll( "*[id]" ) )
		this.$[el.id] = el;

	this._firstRendered();
}

and then accessed the same way as in Polymer: this.$.name.value for example, if we have an <input id="name"/>

[Lodin]

I would be against this feature request. Since lit-element uses lit-html to handle elements declaratively, it’s almost unnecessary to adjust elements manually, and if you still need it, you can do it by built-in tools like querySelector or getElementById called from this.shadowRoot.

[bennypowers]

For posterity, and anyone landing here from google (greetings!), I present a simple mixin:

const isFunction = fn => typeof fn === 'function';

export default superclass => class $Element extends superclass {
  $(selector) {
    return (this.shadowRoot && isFunction(this.shadowRoot.querySelector))
      ? this.shadowRoot.querySelector(selector)
      : undefined;
  }
};