Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace use of @query with ref #94

Open
alancleary opened this issue Apr 14, 2023 · 0 comments
Open

Replace use of @query with ref #94

alancleary opened this issue Apr 14, 2023 · 0 comments
Assignees
Labels
bug Something isn't working enhancement New feature or request

Comments

@alancleary
Copy link
Contributor

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.

@alancleary alancleary self-assigned this Apr 14, 2023
@alancleary alancleary added bug Something isn't working enhancement New feature or request labels Apr 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant