dart - 如何访问其他聚合物元素的 ShadowDOM？

Question

我正在通过制作一个简单的 webapp 来学习 Dart。我想到的应用程序 ui 有两个部分，一个是控制面板，另一个是工作区。通过单击控制面板中的按钮，用户应该能够控制工作区。

控制面板和工作区都是定制的聚合物元素。在控制面板的 dart 类中，我可以使用 shadowRoot.querySelector 访问自身，但由于控制面板需要控制工作区，所以我也需要访问工作区。但我不知道该怎么做。例如，我尝试了 querySelector，它给了我 null。我知道它是工作区标签中的影子 DOM，但是如何访问其他标签的影子 DOM？

我在网上找不到任何东西，每个示例和文档似乎只使用 shadowRoot 来访问 self 元素。

Answer 1

很难访问另一个元素的 shadow DOM，这是设计使然。与其让您的两个自定义元素如此紧密耦合，更好的方法是使用事件或信号。您的控制面板元素应该接受用户输入并使用方便的 fire() 触发适当的事件它从 PolymerElement 类继承的方法。您的应用程序可以捕获这些事件，然后将这些事件转发到您的工作区元素。如果这看起来过于迂回，您可以使用 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 操作非常少。使用数据绑定(bind)和数据驱动 View 是一种成功的策略。