javascript - 我可以使用 jQuery 访问影子 DOM 吗？

Question

我用这样的 polymer 定义了一个组件:

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

现在我想访问shadow dom，例如:获取div id='test'的内容

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

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

Answer 1

不，不在 polymer 元素之外。

阅读完 Polymer 后，您似乎只能在 Polymer 元素内的脚本中访问 Polymer 元素的 Shadow-DOM。 Polymer 文档位于 Automatic node finding说:

Every node in a component’s shadow DOM that is tagged with an id attribute is automatically referenced in the component’s this.$ 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>