我正在通过制作一个简单的 web 应用程序来学习 Dart。我想到的应用程序 ui 有两个部分，一个是控制面板，另一个是工作区。通过单击控制面板中的按钮，用户应该能够控制工作区。
控制面板和工作区都是自定义聚合物元素。在控制面板的 dart 类中，我可以使用 shadowRoot.querySelector 访问自身，但是由于控制面板需要控制工作区，所以我也需要访问工作区。但我不知道该怎么做。例如，我尝试了 querySelector，它给了我 null。我知道它是工作区标签中的影子 DOM，但是如何访问其他标签的影子 DOM？
我在网上找不到任何东西，每个示例和文档似乎都只使用 shadowRoot 来访问 self 元素。
【问题讨论】：
标签： dart dart-polymer dart-webui
很难访问另一个元素的影子 DOM，这是设计使然。与其让您的两个自定义元素如此紧密耦合，更好的方法是使用事件或信号。您的控制面板元素应该使用从 PolymerElement 类继承的方便的fire() 方法接收用户输入并触发适当的事件。您的应用程序可以捕获这些事件，然后将这些事件转发到您的工作区元素。如果这看起来过于迂回，您可以使用 Polymer 的 <core-signals> element 来传递事件，而无需与中介打交道。
例如，在您的控制面板元素中，您可能有一个粗体按钮。
<button on-click="{{boldClicked}}">Bold</button>
单击该按钮时，将执行控制面板的boldClicked() 方法作为响应。它可能看起来像这样：
void boldClicked(Event event, var detail, Element target) {
fire('core-signal', detail: {'name': 'bold', 'data': null});
}
然后在你的工作区元素的 HTML 文件中，你可能有：
<core-signals on-core-signal-bold="{{boldEventReceived}}"></core-signals>
最后，在你的工作区元素的 Dart 类中会出现这样的方法：
void boldEventReceived(Event event, var detail, Element sender) {
// manipulate workspace shadow DOM here
}
这只是实现此目的的几种方法之一。您可以查看 Dart 团队的 <core-signals> example 了解更多信息。
当然，如果您充分发挥 Polymer 的潜力，您会发现您需要做的手动 DOM 操作非常少。使用数据绑定和数据驱动的视图是一种成功的策略。
【讨论】：
您可以使用穿透所有阴影边界querySelector('my-tag /deep/ some-element') 或querySelector('* /deep/ some-element') 的选择器，也可以使用仅穿透一层阴影边界querySelector('my-tag::shadow some-element') 的选择器，或者
将两个元素放在另一个 Polymer 元素的 <template> 中，然后您可以将两个组件的属性与公共父元素上的相同字段连接起来（这是 Polymer 中的首选方法。
@user3216897 的解决方案当然很好，特别是如果元素不共享一个共同的父级。
如果元素具有值为'abc' 的id 属性，您应该能够使用$['abc'] 而不是shadowRoot.querySelector。
【讨论】：