Can I access the shadow DOM using jQuery?

Question

I defined a component with polymer like this:

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

Now I want to access the shadow dom, for example: to get the content of div id='test'

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

The given code doesn't work. Can I access the shadow dom with jquery?

score 21 · Accepted Answer · edited Sep 17 '14 at 11:03

No, not outside of the Polymer element.

After reading up on Polymer, it looks like you can only have access to the shadow-DOM of Polymer elements in scripts within the Polymer element. The Polymer docs on Automatic node finding say:

Every node in a component’s shadow DOM that is tagged with an id attribute is automatically referenced in the component’s this.$ hash.

This means you can add a <script> tag as a sibling to <template> where this.$.test will be the element you want.

<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>

Nice answer for 0.5, but I am not sure if this is still how it''s done in 1.0. — The Onin, Sep 06 '15 at 19:28
My question was irrelevant to polymer, but I found this answer helpful. https://stackoverflow.com/a/58417950/897326 — Victor Zakharov, Jul 26 '21 at 17:42

David Aroesti · Answer 2 · 2017-04-25T18:18:09.093

11

You can use $('body /deep/ your-selector') pattern to pierce through shadow DOM and get Jquery to work inside it.

update: So far I have only managed to make this work on chrome for desktop. I believe, other browsers do not support the /deep/ combinator.

update 2: /deep/ combinator is deprecated and should not be used anymore. It is scheduled to be removed from Chrome.

edited Apr 25 '17 at 18:18

answered Jul 29 '14 at 01:29

David Aroesti

596
4
10

1

@NickFlekerFelker Maybe this [link](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) can help you. ;) – David Aroesti Aug 07 '14 at 20:21
1

`/deep/` seems to have been deprecated: https://www.chromestatus.com/features/6750456638341120 – artemave Jan 22 '16 at 22:39
You are right. It is deprecated and shouldn't be used anymore. – David Aroesti Feb 24 '17 at 17:02

score 6 · Answer 3 · answered Oct 16 '19 at 16:35

6

I'm able to access the shadowRoot elements in Chrome like so:

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

Got the idea from Jquery: How to select only within a selection?

answered Oct 16 '19 at 16:35

user11302188

73
1
4

1

You will need a `[0]` after `$("#idOfShadowRootElement")`, because `.shadowRoot` is on DOM objects but not on jQuery ones. So like this: `$("#idOfElementInShadowRoot", $("#idOfShadowRootElement")[0].shadowRoot)` – DawnPaladin Feb 25 '21 at 20:41
Have to be using the "open" mode of `attachShadow` for this to work. "closed" mode will give you null. Otherwise a great answer, thanks! – Victor Zakharov Jul 26 '21 at 17:41

score 3 · Answer 4 · answered Mar 13 '15 at 12:04

3

I think this works for me...

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

Only tested it on chrome though

answered Mar 13 '15 at 12:04

Val

17,336
23
95
144

3

This is also deprecated. https://stackoverflow.com/questions/35741722/whats-the-substitute-for-shadow-and-deep – Ally Jun 12 '17 at 02:55

score 2 · Answer 5 · edited May 29 '20 at 17:52

2

You can do it like this:

$("#example", this.shadowRoot).DataTable();

edited May 29 '20 at 17:52

Benedikt J Schlegel

1,707
1
10
23

answered May 29 '20 at 16:25

Adolfo Martin

21
2

score 2 · Answer 6 · answered Jan 19 '21 at 00:29

2

This worked for me

$(element)[0].shadowRoot

answered Jan 19 '21 at 00:29

IMPLATRIX

21
2

score 1 · Answer 7 · answered Apr 14 '15 at 22:56

I wrote simple helper in TypeScript to solve this problem:

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;
        }
    }
}

Usage:

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

Tested on desktop Chrome, Internet Explorer, Firefox

score 1 · Answer 8 · answered Mar 22 '20 at 08:50

1

Use something like this:

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

and call:

$("my-element").shadowRoot());

answered Mar 22 '20 at 08:50

Peter Karena

71
1
1

score 0 · Answer 9 · answered Mar 22 '20 at 22:53

this is my simple function to change capcha in shadow-root

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);
};

score 0 · Answer 10 · answered Jul 29 '21 at 19:46

For what it's worth tossing this into the list of answers since it's ultimately what I used.

// following line assumes shadow content has only one <body> tag... 
// ...otherwise filter by whatever makes sense for your code

var $shadowBody = $($("#shadow-root-elem")[0].shadowRoot.childNodes).filter("body");

// get the elem in the shadow content that I need/want

var $elemInShadowBody = $shadowBody.find(".selector.for.elem.in.shadow.body")

Can I access the shadow DOM using jQuery?

10 Answers10

Linked