我想从我的 app.dart 全局访问 my-app-as-an-element.html 中的 DOM 元素（因为它是我想从多个地方调用的方法，例如它更改页面标题），但由于它被阴影所包裹，我似乎无法理解它。有一个技巧可以做，例如
HtmlElement el;
el = document.querySelector('body /deep/ #page-title');
但 /deep/ 在 Safari 中不受尊重，因此不在讨论范围内。想法？
【问题讨论】：
标签： dart polymer dart-polymer
您正在尝试做的事情直接违背了 Polymer 的理念：所有封装、使用 Shadow DOM 等的重点是让可重用的组件管理自己的状态，包括 DOM。
如果拥有您尝试访问的 DOM 元素的元素是 custom 元素（即您或您公司的某个人已经编写了它），最好的解决方案是公开功能您需要作为该元素的公共方法。
比如说，你的元素有一个<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> 标记插入被扩展对象的 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');
这为您提供了元素的句柄，然后您可以根据需要对其进行修改。但同样，我不建议您使用它，除非您需要快速访问此元素以进行调试。
【讨论】：
changeTitle()方法放入App全局，然后使用document.querySelector('my-app-as-an-element::shadow #page-title');与元素交互，然后我可以调用app.changeTitle( ) 从任何地方导入 App，但为什么说不推荐呢？
document.querySelector('my-element').changeTitle("whatever") 之类的操作。如果可能的话，你永远不应该从外部访问另一个元素的 Shadow DOM 的原因是封装：Shadow DOM 应该是“私有”内容，由拥有它的元素管理。
querySelector 中的 /deep/ 的 Polyfill 正在进行中，很快将在不支持本机 Shadow DOM 的浏览器上使用。
【讨论】：