How to use jQuery DOM element selectors in Polymer?

Question

I was trying to implement jsGrid in Polymer but was stuck where it required to get the target grid DOM element to the jsGrid() function. Being unable to produce an equivalent to $("#jsGrid") in Polymer.

I have already imported all the required source files in the polymer component file itself using the import command.

// Render function

render(){
    return html`
      ${jsGrid_css}
      ${jsGrid_theme_css}
      <h2>Hello ${this.name}!</h2>
      <div id="jsGrid"></div>
    `;
  }

// Render grid method

renderGrid(){
    const gridEle = document.getElementById("jsGrid")
    const gridNode = this.shadowRoot.querySelector("#jsGrid");

    console.log($("#jsGrid"))
    //--> output to this shows no element

    $("#jsGrid").jsGrid({
          width: "100%",
          height: "400px",

          inserting: true,
          editing: true,
          sorting: true,
          paging: true,

          data:this.clients,

          fields: [
              { name: "Name", type: "text", width: 150, validate: "required" },
              { name: "Age", type: "number", width: 50 },
              { name: "Address", type: "text", width: 200 },
              { name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
              { type: "control" }
          ]
      });


  }

The grid is not being rendered on the html page when i am using $("#jsGrid") . This could be due to the fact that jsGrid() method is unable to get the DOM element with required properties when i replace $("#jsGrid") with this.shadowRoot.querySelector("#jsGrid") or with document.getElementById("jsGrid")

Thanks in advance!

I would suggest natural Polymer element instead of jsGrid. See the example which I have used at this example https://stackoverflow.com/questions/54415546/push-filter-with-vaadin-date-picker-into-datatables-in-polymer/54473355#54473355 — Cappittall, Feb 12 '19 at 12:38
@HakanC I tried the same with vaadin grid. Good example though — Rahul Sharma, Feb 17 '19 at 16:21

score 0 · Answer 1 · answered May 04 '21 at 19:16

jQuery makes some assumptions about how your page is built that were very useful in 2008, but don't play nice with modern libraries like Lit.

Firstly, $("#jsGrid") is basically document.querySelector("#jsGrid") with a load of wrapper functions. Back when jQuery launched querySelector had limited support and jQuery handled all the browsers for you, but this really isn't needed now.

jQuery existed long before Shadow DOM, and has no clue about it - you can't do anything with Shadow DOM and $, but you're on the right track with this.shadowRoot. Once you have the element jQuery doesn't need another query path, you can pass the element:

const gridNode = this.shadowRoot.querySelector("#jsGrid");

$(gridNode).jsGrid({...

However, this will not be very stable - jQuery builds DOM inside the template LitElement has built, you need to ensure that DOM has been build before calling it (calling renderGrid from inside firstUpdated should be enough). LitElement may change the templated DOM, and when it does it might reset your grid.

How to use jQuery DOM element selectors in Polymer?

1 Answers1