我想从我的app.dart全局访问my-app-as-an-element.html中的DOM元素（因为这是我想从多个地方调用的方法，例如，它更改了页面标题），但是包裹在阴影和所有东西中，我似乎无法理解。有一个窍门，例如
HtmlElement el;
el = document.querySelector('body /deep/ #page-title');
但是/ deep /在Safari中不受尊重，因此不在讨论之列。有想法吗？
您尝试做的事情直接违背了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");
如果您要更改的元素是公共元素（例如从core-elements或paper-elements）拥有的，或者是您从某个存储库下载的任何内容，请阅读文档，看看它是否以某种方式公开了您需要的功能。如果没有，您可以尝试编写自己的自定义元素以扩展该元素。在扩展元素中，您可以使用<shadow></shadow>标签插入扩展对象的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');
这为您提供了元素的句柄，然后可以根据需要进行修改。但是同样，除非您需要快速访问此元素以进行调试，否则我建议您不要使用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句