jQuery selector doesn't work very well for Polymer2 shady dom template

Question

my company using Bootstrap Tour which works perfectly fine with PolymerV1, but after updated to PolymerV2 shady dom version. The jQuery selector doesn't work very well. For example: if using this way:

// configurationId is auto generated for this element

$('#title-Checklist-'+configurationId+'-name') // doesn't work
$('title-Checklist-382757-name') // doesn't work too

However, if using:

$('[id=title-Checklist-' + configurationId + '-name]')[0]; // it works

I have tried other selectors such as:

this.shadowRoot.querySelector,
document.getElementById
this.$.title-Checklist-configurationId-name
...

All doesn't work! Does any one know what the difference between two? or Any better solution for using jQuery in Polymer2 shady DOM?

Answer 1

The interpreter can't tell the difference between strings and variables in:

$(#title-Checklist-configurationId-name)

Try this:

$('#title-Checklist-'+configurationId+'-name')