Replace use of @query with ref

[alancleary]

Some components use the Lit @query decorator to select elements in their template. However, since we're disabling the Shadow DOM, the entire DOM is searched, rather than just the Component's Shadow DOM. As a consequence, if two elements are composed that use @query to select the same element, they both select whichever element occurs first in the DOM, rather than their respective elements.

To fix this, we can use the Lit ref directive, which allows you to select specific elements by using a class variable as a marker in the template. This is advantageous to regular CSS selectors because you don't have to worry about ID collisions or that your selectors won't be specific enough, especially when using multiple instances of a component within a single page.