[lit-helpers] ref directive

when all you have is a template and not a full web component it can become a hassle if you need to reference one node to another

Example:

return html`
  <my-dialog>some content</my-dialog>
  <button @click=${() => dialog???.open()}>open dialog</button>
`;

a ref directive could allow getting a reference to the node

import { setRef, getRef } from '@open-wc/lit-helpers';

return html`
  <my-dialog ~=${setRef('dialog')}>some content</my-dialog>
  <button @click=${() => getRef('dialog').open()}>open dialog</button>
`;

PS: setRef would be a directive whereas getRef is just a plain function

Why ~=?

A directive needs a hook on an attribute or property in order to work. It could be anything… as a best practice proposal it could be ~=… feel free to propose alternatives

Why setRef and not setReference

Good question - both are fine… one is short the other is more explicit. Let us know what you would prefer.

[thepassle]

This comment may be a bit premature, but im not really sure how I feel about the ~ prefix, for a few reasons: We’re gonna run out of weird symbols to use at some point, and 2: it gives me flashbacks to angularjs where nothing makes sense

I think the prefixes lit-html uses make a lot of sense, @ for events reads as ‘at event’, . for properties refers to setting props in js, etc. But ~ in relation to ref just doesn’t mean anything to me, and I really dont look forward to having my templates filled with a bunch of symbols ~%*& in the future 🙈

[daKmoR]

There is now an official ref directive with the latest version of lit.

https://lit.dev/docs/api/directives/#ref