如何访问其他聚合物元素的Shadow DOM？

Question

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

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

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

Answer 1

很难访问另一个元素的shadow 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}); }

然后在您的workspace元素的HTML文件中，您可能有：

<core-signals on-core-signal-bold="{{boldEventReceived}}"></core-signals>

最后，在您的workspace元素中，Dart类将是一个类似的方法：

void boldEventReceived(Event event, var detail, Element sender) { // manipulate workspace shadow DOM here }

这只是实现此目的的几种方法之一。你可以查看Dart团队的<core-signals> example了解更多信息。

当然，如果你充分利用Polymer，你会发现你需要做很少的手动DOM操作。使用数据绑定和数据驱动的视图是一种成功的策略。

Answer 2

你可以使用一个穿过所有阴影边界querySelector('my-tag /deep/ some-element')或querySelector('* /deep/ some-element')的选择器，或者只穿过一个阴影边界querySelector('my-tag::shadow some-element')的选择器，或者 将这两个元素放在另一个Polymer元素的<template>中，然后您可以将两个组件的属性与公共父元素上的相同字段连接（这是Polymer中的首选方法。

@ user3216897的解决方案当然很好，特别是如果这些元素不共享一个共同的父母。

如果元素的shadowRoot.querySelector属性值为$['abc']，则应该能够使用id而不是'abc'。