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。 Automatic node finding上的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

我认为这对我有用......

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

虽然只在Chrome上测试过

Answer 4

我在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

上测试

Answer 5

使用类似这样的内容：

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

并致电：

$("my-element").shadowRoot());

Answer 6

这对我有用

$(element)[0].shadowRoot

Answer 7

我能够像这样访问Chrome中的shadowRoot元素：

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

从Jquery: How to select only within a selection?那里得到了创意

Answer 8

这是我更改影子根目录中的capcha的简单函数

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

Answer 9

您可以这样做：

$("#example", this.shadowRoot).DataTable();

Answer 10

有什么值得把它扔到答案列表中，因为它最终是我使用的。

// 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")

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

10 个答案: