聚合物webcomponent中的jQuery选择

Question

嗯，开箱即用，jQuery不支持选择webcomponent内的节点。 （可能是因为document.querySelector()不适用于影子DOM（根据定义也不应该）。

我们之前的代码库在某种程度上依赖于jQuery，许多开发人员不想放弃$(...)选择的简单性。所以，我结束了这个快速而又肮脏的伎俩。

window.$$ = function (that, selector) {
    return $(that.shadowRoot.querySelectorAll(selector));
}

用法（在生命周期内回调或可以访问host节点时）：

jqel = $$(this, '.myClass'); // this has reference to the host

问题是，有没有更好的方法来解决这个问题？

Answer 1

我创建了一个jquery-polymer插件，它有很多功能可以帮助你处理聚合物阴影dom

https://github.com/digital-flowers/jquery-polymer

选择聚合物元素中的任何元素，比如说

<my-button id='button1'></my-button>

首先你需要使用

获得按钮阴影根

$("#button1").getShadowRoot() 

或

$("#button1").shadow()

这会将按钮阴影根返回为jquery对象，然后您可以选择其中的任何内容，例如

$("#button1").shadow().find("ul > li:first")

欢呼;）

Answer 2

据我所知，Jquery允许将上下文作为参数JqueryContext传递，所以正确的方法是：

$('selector',context)

举个例子：

var component1 = document.querySelector('qr-code');
// Find some img inside qr-code component
var img1 = $('img',component1)