How to migrate aura:id to Lightning Web Components

I have found the LWC docs to offload some of this to the MDN docs, so bringing this one layer higher (in the actual LWC docs would be nice) would have made it easier for us.

In scenarios where there are two components of the same type on your template, the equivalent to aura:id is to use a data-id tag and select it like this:

this.template.querySelector('[data-id="userform"]')

The equivalent of using aura:id and component.find() in LWC is to use a standard DOM query selector like this:

const element = this.template.querySelector('selector');
element.doSomething();

We do have a restrictions to that standard behavior: you cannot use the id attribute as a selector as these are autogenerated by the framework. You are free to use any tag name or CSS class to filter the element that you wish to retrieve.

See Documentation.