jQuery 选择器不适用于 Polymer2 shady dom 模板答案

【问题标题】：jQuery selector doesn't work very well for Polymer2 shady dom templatejQuery 选择器不适用于 Polymer2 shady dom 模板
【发布时间】：2018-12-20 02:45:31
【问题描述】：

我的公司使用 Bootstrap Tour，它与 PolymerV1 完美配合，但在更新到 PolymerV2 shady dom 版本后。 jQuery 选择器不能很好地工作。例如：如果使用这种方式：

// 为该元素自动生成 configurationId

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

但是，如果使用：

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

我尝试过其他选择器，例如：

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

一切都行不通！有谁知道两者有什么区别？或者在 Polymer2 shady DOM 中使用 jQuery 有什么更好的解决方案？

【问题讨论】：

标签： jquery polymer-2.x shady-dom

【解决方案1】：

解释器无法区分以下字符串和变量：

$(#title-Checklist-configurationId-name)

试试这个：

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

【讨论】：

您好，杰伊，非常感谢您的回复！实际上，我在描述中输入错误，只是更正它。我只是按照你的方式使用：$('#title-Checklist-'+configurationId+'-name'), event I put $('#title-Checklist-382757-name') 无法选择元素。它显示 r.fn.init 和 prop: object(0)。但这种方式有效： $('[id=title-Checklist-' + configurationId + '-name]')[0];对我来说它没有任何场景，你知道吗？
这很奇怪。我对 Bootstrap 不是很熟悉。我希望我能帮助你更多。