Best practices for setting properties of a web component that uses jQuery UI widgets?

I have been trying to integrate few third party components into vaadin app. and I am wondering what are the best practices for setting properties of a web component that uses jQuery UI widgets?
Pseudo code of a very simple component is below
class JQueryTest extends LitElement { static get properties() { return { dt_type: { type: String } }; } constructor() { super(); this.dt_type = 'date'; } render() { return html


; } createRenderRoot() { return this; /* override the createRenderRoot method to return this instead of the actual shadow root. Behaves similar to regular DOM element with respect to CSS styling. */ } updated(changedProperties) { //use the updated() method to check whether the dt_type property has changed since the last update. // If it has, use jQuery to retrieve the instance of the DateBox component and set its type option to the new value of the dt_type property. if (changedProperties.has('dt_type')) { //Question: However, it's possible that the jQuery object may not have been initialized or that this.renderRootis null on occasion. // How can we handle these cases to avoid errors when accessing the#dateelement and its associated DateBox instance? const dateBox = $(this.renderRoot.querySelector("#date")).dxDateBox('instance'); if (dateBox) { dateBox.option('type', this.dt_type); } } } firstUpdated() { const now = new Date(); let element=this.renderRoot.querySelector("#date"); $(element).dxDateBox({ type: 'date', value: now, }); } } customElements.define('jquery-test', JQueryTest);
I would like to set the value of the dt_type property programmatically, after the component has been initialised and added to the DOM, rendered,
I’m unsure whether it’s possible to solve a this problem in server java code or if I need to approach it from a different angle. Appreciate any advice.

Java code snippet

@Tag("jquery-test") @JsModule("integration/jquery-test-element.js") public class JQTest extends Component { public JQTest() { ... set ID etc. getElement().setProperty("dt_type", "datetime");// Question is this possible to set if after element is available in DOM and rendered. } }

My opinion is to not use Lit at all since you’re using jquery for the component, your render() function is empty, you’re not using shadow dom,…

You have some examples here: GitHub - jcgueriaud1/vaadin-tooltip-js: Different integration of tooltip js in Vaadin 14

Many thanks @faithful-emu I looked at the example you provided, and I agree that it would be far easier to use jQuery without LitElement, and it probably does not serve any purpose. Unfortunately, for me, I am possibly looking at a large refactoring of code to make it work without LitElement as there are lots of other components using similar pattern . The code I have pasted above used to work without any issues in previous versions of Vaadin, which I guess is due to some optimisations carried out in the latest Vaadin platform 23 (batching of RPC calls).

What does div.addAttachListener do? This does look promising to me.

` public TrumbowygResourceView() {
Div div = new Div();
add(div);

    div.addAttachListener(event -> {
        event.getUI().getPage().executeJs(
                "initTrumbowyg($0);", div.getElement());
    });

`

found the link for attach event, this is exactly I was looking for https://vaadin.com/docs/v14/flow/creating-components/tutorial-component-lifecycle-callbacks.
thank you for your opinions @faithful-emu However, I will explore the possibility of removing LitElement from my jQuery components if I have the time.

Found another way to resolve the issue. hope it can help someone else

//Wait for the lit-element's update cycle to complete by waiting on the resolution of the updateComplete promise. this.updateComplete.then(() => { // Get a DateBox instance from the DOM using jQuery and set its 'type' option to this.dt_type. let dateBox = $(this.renderRoot.querySelector("#date")).dxDateBox('instance'); dateBox.option('type', this.dt_type); });