我可以使用jQuery访问shadow DOM吗？

Question

我用这样的聚合物定义了一个组件:

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

Answer 1

不,不在Polymer元素之外.

阅读Polymer之后,看起来您只能在Polymer元素的脚本中访问Polymer元素的shadow-DOM.关于自动节点查找的Polymer文档说:

组件的shadow DOM中用id属性标记的每个节点都在组件的这个.$ hash中自动引用.

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

Answer 2

您可以使用$('body /deep/ your-selector')模式来穿透阴​​影DOM并让Jquery在其中工作.

更新:到目前为止,我只是设法使用chrome for desktop.我相信,其他浏览器不支持/ deep/combinator.

更新2:/deep/不推荐使用combinator,不应再使用它.它计划从Chrome中删除.

Answer 3

我可以像这样访问 Chrome 中的 shadowRoot 元素：

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

从Jquery 中得到了想法：如何仅在选择中进行选择？