web-dev-qa-db-ja.com

jQueryを使用してシャドウDOMにアクセスできますか？

私はpolymerでコンポーネントを次のように定義しました：

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

たとえば、シャドウDOMにアクセスしたいとします。たとえば、div id = 'test'のコンテンツを取得するには

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

指定されたコードは機能しません。 jqueryでシャドウDOMにアクセスできますか？

javascriptjquerydompolymershadow-dom
17
mica

いいえ、Polymer要素の外側ではありません。

Polymerを読んだ後は、Polymer要素内のスクリプトでPolymer要素のシャドウDOMにしかアクセスできないようです。 自動ノード検索 に関するPolymerドキュメントはこう言います：

Id属性でタグ付けされたコンポーネントのシャドウDOM内のすべてのノードは、コンポーネントのthis。$ハッシュで自動的に参照されます。

つまり、<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>
19
Henry Blyth

$('body /deep/ your-selector')パターンを使用して、シャドウDOMを突き抜け、その内部でJqueryを機能させることができます。

pdate：これまでのところ、これはデスクトップでchromeでのみ機能します。他のブラウザは/ deep /コンビネータをサポートしていないと思います。

更新2：/deep/ Combinatorは非推奨であり、今後は使用しないでください。 Chromeから削除される予定です。

10
David Aroesti

これはうまくいくと思います...

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

chromeでのみテストしました

4
Val

私はChromeのshadowRoot要素に次のようにアクセスできます：

$("#idOfElementInShadowRoot", $("#idOfShadowRootElement").shadowRoot)

Jqueryからアイデアを得た：選択範囲内のみを選択する方法

1
user11302188

この問題を解決するために、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でテスト済み

1
Konrad G

このようなものを使用してください：

jQuery.fn.extend({
  shadowRoot: function() {
     return $(this.get(0).shadowRoot);
  },
});

そして呼び出す：

$("my-element").shadowRoot());
0
Peter Karena

これは、シャドウルートでキャプチャを変更するための単純な関数です

const get_captcha = (CustomElement)=>{
        var src = `./app/create_captcha/${chance.natural()}`;
        var rootElement = $(CustomElement)[0].shadowRoot;
        var captchaElement = $(rootElement).find('#img_captcha');
        $(captchaElement).attr('src',src);
};
0
Jurig Gunung