Can I access the shadow DOM using jQuery?
I defined a component with polymer like this:
CONTENT
-
I think this works for me...
$('polymer-element::shadow #test')Only tested it on chrome though
讨论(0) -
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.讨论(0) -
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
讨论(0) -
You can do it like this:
$("#example", this.shadowRoot).DataTable();讨论(0) -
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>wherethis.$.testwill 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>讨论(0) -
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?
讨论(0)
加载中...
- 热议问题