我可以使用jQuery访问阴影DOM吗？ [英] Can I access the shadow DOM using jQuery?

问题描述

我用这种聚合物定义了一个组件：

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

现在我想访问shadow dom，例如：获取div id =' test'

  var x = $（div＃test）。 
  

给定的代码不起作用。
我可以使用jquery访问shadow dom吗？

解决方案

否，不在Polymer元素之外。 >

在阅读了Polymer之后，看起来您只能在Polymer元素中的脚本中访问Polymer元素的shadow-DOM。聚合物文档在自动结点查找上说：

组件的这个$哈希中会自动引用组件的带有id属性的阴影DOM中的每个节点。

这意味着您可以将< 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> 
  

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?

解决方案

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>

这篇关于我可以使用jQuery访问阴影DOM吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！