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

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

  
CONTENT
   

现在我想访问阴影dom，例如：获取div id =’test’的内容

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

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

Answer 1

不，不在Polymer元素之外。

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

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

这意味着您可以将标记添加为的兄弟，其中this.$.test将是您想要的元素。

Answer 2

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

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

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

Answer 3

我觉得这对我有用……

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

虽然只在铬上测试过它

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上测试