jQuery selection in polymer webcomponent

Question

Ну, из коробки jQuery не поддерживает выбор узлов внутри веб-компонентов. (возможно, потому, что 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-полимерный плагин, который имеет много функций, которые могут помочь вам дело с полимерной тенью йотом

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)