Can I access the shadow DOM using jQuery?
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>
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.