Могу ли я получить доступ к теневой DOM с помощью jQuery?

Я определил компонент с полимером следующим образом:

<polymer-element name="my-component">
  <template>
    <div id='test'>CONTENT</div>
  </template>
</polymer-element>

Теперь я хочу получить доступ к теневому domу, например: получить содержимое div id = 'test'

var x = $("div#test").html();

Данный код не работает. Могу ли я получить доступ к теневому домику с jquery?

Ответы

Ответ 1

Нет, не за пределами полимерного элемента.

После чтения на Polymer, похоже, что вы можете иметь доступ только к теневому DOM элементов полимера в сценариях в элементе Polymer. Полимерные документы в Автоматический node поиск говорят:

Каждый node в теневом объекте DOM, помеченный атрибутом id, автоматически ссылается на компоненты этого. $hash.

Это означает, что вы можете добавить тег <script> в качестве брата на <template>, где this.$.test будет тем, который вы хотите.

<polymer-element name="my-component">
  <template>
    <div id='test'>CONTENT</div>
  </template>
  <script>
    Polymer('my-component', {
        logNameValue: function () {
            console.log('polymer element', this.$.test);
            console.log('jQuery wrapper of polymer element', $(this.$.test));
        }
    });
  </script>
</polymer-element>

Ответ 2

Вы можете использовать шаблон $('body /deep/ your-selector') для прошивки через теневую DOM и заставить JQuery работать внутри него.

update. До сих пор мне удалось выполнить эту работу на Chrome для рабочего стола. Я считаю, что другие браузеры не поддерживают /deep/combinator.

update 2: /deep/ combinator устарел и больше не должен использоваться. Его можно удалить из Chrome.

Ответ 3

Я думаю, что это работает для меня...

$('polymer-element::shadow #test')

Проверял только хром, но

Ответ 4

Я написал простой помощник в TypeScript для решения этой проблемы:

class DomUtils {

    public static getShadowElementById(id: string):any {

        try {
            // Try to get it by simple id in case of browser doesn't support shadow DOM
            var element = $("#" + id);

            if (element.length <= 0) {
                // Support Chrome browser
                element = $("body /deep/ #" + id);
            }

            return element;

        } catch (error) {
            console.log("Error: " + error + ", while trying to get shadow element with id: " + id);
            return null;
        }
    }
}

Использование:

var element = DomUtils.getShadowElementById('mainContainer');

Протестировано на рабочем столе Chrome, Internet Explorer, Firefox