21

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

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

4

10 回答 10

21

不，不在 Polymer 元素之外。

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

在组件的 this.$ 哈希中自动引用组件的影子 DOM 中带有 id 属性的每个节点。

这意味着您可以将<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>
于 2014-01-19T16:01:12.643 回答
11

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

更新：到目前为止，我只设法在桌面版 chrome 上完成这项工作。我相信，其他浏览器不支持 /deep/ 组合器。

更新 2：/deep/组合器已弃用，不应再使用。它计划从 Chrome 中删除。

于 2014-07-29T01:29:32.180 回答
6

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

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

从 Jquery 得到这个想法：如何只在一个选择中选择？

于 2019-10-16T16:35:11.150 回答
3

我认为这对我有用...

$('polymer-element::shadow #test')

虽然只在 chrome 上测试过

于 2015-03-13T12:04:21.830 回答
2

你可以这样做：

$("#example", this.shadowRoot).DataTable();
于 2020-05-29T16:25:55.193 回答
1

我在 TypeScript 中编写了简单的助手来解决这个问题：

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;
        }
    }
}

用法：

var element = DomUtils.getShadowElementById('mainContainer');

在桌面 Chrome、Internet Explorer、Firefox 上测试

于 2015-04-14T22:56:41.817 回答
1

这对我有用

$(element)[0].shadowRoot

于 2021-01-19T00:29:05.123 回答
1

使用这样的东西：

jQuery.fn.extend({
  shadowRoot: function() {
     return $(this.get(0).shadowRoot);
  },
});

并致电：

$("my-element").shadowRoot());
于 2020-03-22T08:50:48.230 回答
0

因为它最终是我使用的，所以值得将其放入答案列表中。

// following line assumes shadow content has only one <body> tag... 
// ...otherwise filter by whatever makes sense for your code

var $shadowBody = $($("#shadow-root-elem")[0].shadowRoot.childNodes).filter("body");

// get the elem in the shadow content that I need/want

var $elemInShadowBody = $shadowBody.find(".selector.for.elem.in.shadow.body")
于 2021-07-29T19:46:46.800 回答
0

这是我在 shadow-root 中更改验证码的简单功能 

const get_captcha = (CustomElement)=>{
	var src = `./app/create_captcha/${chance.natural()}`;
	var rootElement = $(CustomElement)[0].shadowRoot;
	var captchaElement = $(rootElement).find('#img_captcha');
	$(captchaElement).attr('src',src);
};

于 2020-03-22T22:53:39.143 回答