Question

我想从我的app.dart全局访问my-app-as-an-element.html中的DOM元素（因为它是我想从多个地方调用的方法，例如它改变了页面标题），但由于它包裹在阴影中，所以我似乎无法得到它。有一个技巧要做，例如

HtmlElement el;
el = document.querySelector('body /deep/ #page-title');

但是/深度/在Safari中并没有得到尊重，所以它不在桌面上。想法？

Answer 1

你要做的事情直接违背了Polymer的理念：使用Shadow DOM等所有封装的重点是拥有可重用的组件来管理自己的状态，包括DOM。

如果拥有您尝试访问的DOM元素的元素是自定义元素（即您或您公司的某个人已经编写过该元素），那么最佳解决方案就是公开功能你需要作为该元素的公共方法。

例如，假设您的元素有<h1>，并且您想要更改其内容。你可以这样做：

Polymer("my-custom-element", {
    changeTitle: function(newTitle) {
        // this operates on the element's Shadow DOM *only*,
        // NOT the entire page
        document.querySelector('h1').htmlContent = newTitle;
    }
})

然后，您可以通过全局代码进行此调用：

document.querySelector("my-custom-element").changeTitle("My New Title");

如果您尝试更改的元素归 public 元素所有（例如来自core-elements或paper-elements），或者您从某些元素下载的任何内容存储库，阅读文档，看看它是否以某种方式公开了您需要的功能。如果没有，您可以尝试编写extends该元素的自定义元素。在扩展元素中，您可以使用<shadow></shadow>标记插入extendee的Shadow DOM，并通过元素的JavaScript以与上述相同的方式对其进行操作。

编辑：实际上，有一种方法可以直接做你想做的事，虽然我只推荐这作为最后的手段。如果您阅读Shadow DOM 201，则会注意到您可以通过.shadowRoot属性访问元素的Shadow DOM。这会为您提供另一个Document对象，您可以再次使用.querySelector，如下所示：

document.querySelector('my-custom-element').shadowRoot.querySelector('h1');

甚至

document.querySelector('my-custom-element::shadow h1');

这为您提供了元素的句柄，然后您可以根据需要进行修改。但同样，除非您需要快速访问此元素以进行调试，否则我不建议使用此功能。

Answer 2

/deep/中querySelector的填充功能正在进行中，很快就可以在没有原生Shadow DOM支持的浏览器上使用。

如何从全局命名空间访问Polymer元素中的DOM元素？

2 个答案: