You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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.The text was updated successfully, but these errors were encountered: