vaadin-date-picker | Web Component providing a date selection field | Web Framework library

The @query decorator won't work with dialog content generated by the renderer function, because all the dialog content is transported into a separate overlay element, which is not a child of your test-date-dialog. You can confirm this by inspecting the dialog content in your browsers dev tools for example. The @query decorator doesn't work in that case, because it only looks for children of the element on which it is applied.

One solution here could be to extract the dialog content from the renderer function into a separate Lit component (for example TestDateDialogContent), and render that component in the renderer function. Within TestDateDialogContent you can then use the @query decorator to access the date picker. You can also use the regular lifecycle methods, such as firstUpdated, to do other initialization, such as setting the I18N settings on the date picker, or making async calls to the backend.

In test-date-dialog-content.ts: