我正在通过制作一个简单的 webapp 来学习 Dart。我想到的应用程序 ui 有两个部分,一个是控制面板,另一个是工作区。通过单击控制面板中的按钮,用户应该能够控制工作区。
控制面板和工作区都是定制的聚合物元素。在控制面板的 dart 类中,我可以使用 shadowRoot.querySelector 访问自身,但由于控制面板需要控制工作区,所以我也需要访问工作区。但我不知道该怎么做。例如,我尝试了 querySelector,它给了我 null。我知道它是工作区标签中的影子 DOM,但是如何访问其他标签的影子 DOM?
我在网上找不到任何东西,每个示例和文档似乎只使用 shadowRoot 来访问 self 元素。
最佳答案
很难访问另一个元素的 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 是一种成功的策略。
关于dart - 如何访问其他聚合物元素的 ShadowDOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26436329/