为什么元素在使用来自同级聚合物元素的调度事件时不捕获事件？

Question

我的UI中有以下聚合物元素，它有两个聚合物元素，基线策略创建和基线策略域ajax。

<dom-module id="baseline-policies-tab">
<template>
<style include="dfw-styles">
:host {
display: block;
}
</style>
<baseline-policy-create></baseline-policy-create>
<baseline-policy-domain-ajax></baseline-policy-domain-ajax>
</template>
<script>
class BaselinePoliciesTab extends Polymer.Element {
static get is() {
return 'baseline-policies-tab';
}
static get properties() {
}
}
customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);
</script>
</dom-module>

在我的基线策略创建元素中，我有一个下拉按钮，可以选择"Package"或"Subscription"。当我选择其中一个时，我会调度一个CustomEvent，它应该会触发我在基线策略域ajax中注册的侦听器。以下是创建基线策略的代码：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../shared-styles.html">
<link rel="import" href="../../bower_components/dfw-styles/dfw-styles.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<dom-module id="baseline-policy-create">
<template>
<style include="dfw-styles">
:host {
display: block;
}
.top-button{
float : right;
}
</style>
<div class="outer-buttons">
<paper-menu-button horizontal-align="right" no-overlap="true" no-animations class="top-button">
<paper-button slot="dropdown-trigger" class="dropdown-trigger create-button btn-primary">
<iron-icon icon="menu"></iron-icon>
<span>Create Baseline Policy</span>
</paper-button>
<paper-listbox slot="dropdown-content" class="dropdown-content">
<template is="dom-repeat" items="{{_domains}}">
<paper-item on-tap="_getDomainSchema">[[item.label]]</paper-item>
</template>
</paper-listbox>
</paper-menu-button>
</div>
</template>
<script>
class BaselinePolicyCreate extends Polymer.Element {
static get is() {
return 'baseline-policy-create';
}
static get properties() {
return {
_domains: {
type: Array,
value: [{'name':'Package', 'label':'Package'},
{'name':'Subscription', 'label':'Subscription'}] //TODO: is it possible to get these values from an API source
}
}
}
_getDomainSchema(evt) {
console.info("Get the schema for the following domain:", evt.target.innerText);
// fire event here to trigger ajax call in baseline-policy-domain-ajax
this.dispatchEvent(new CustomEvent('domain-ajax',{detail : evt.target.innerText}));
}
}
customElements.define(BaselinePolicyCreate.is, BaselinePolicyCreate);
</script>
</dom-module>

下面是基线策略域ajax的代码：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="baseline-policy-domain-ajax">
<template>
<style></style>
<iron-ajax
id = "getSchema"
auto = false
url="<removed-url-for-confidentiality>"
params='{"domain" : "Package"}'
handle-as="json"
on-response="_handleResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
class BaselinePolicyDomainAjax extends Polymer.Element {
static get is() { return 'baseline-policy-domain-ajax'; }
//static get properties() {  }
//static get observers() {  }
connectedCallback(){
super.connectedCallback();
console.log("ajax element is attached! Register listeners");
document.addEventListener('domain-ajax',this._editPage.bind(this),true);
}
_handleResponse(event, request) {
console.log ('Handle Response');
var response = request.response;
console.log(response);
}
_editPage(evt){
console.log("Change Page to New Baseline Policy");
console.log(evt.detail);
}
}
customElements.define(BaselinePolicyDomainAjax.is, BaselinePolicyDomainAjax);
</script>
</dom-module>

为了保密，我删除了url，但我已经测试了iron-ajax组件，我能够成功地调用API。

日志没有告诉我为什么听众没有从另一个聚合物元素"听到"我的事件。你知道我做错了什么吗？

Answer 1

正如Mishu在评论中所说，事件在层次结构中向上传播。因此，在baseline-policies-tab中，您需要捕获该事件并手动将其传递给baseline-policy-domain-ajax。

例如：

<dom-module id="baseline-policies-tab">
<template>
<style include="dfw-styles">
:host {
display: block;
}
</style>
<baseline-policy-create on-domain-ajax="_onDomainAjax"></baseline-policy-create>
<baseline-policy-domain-ajax></baseline-policy-domain-ajax>
</template>
<script>
class BaselinePoliciesTab extends Polymer.Element {
static get is() {
return 'baseline-policies-tab';
}
static get properties() {
}
_onDomainAjax(e) {
this.shadowRoot.querySelector("baseline-policy-domain-ajax")._editPage(e);
}
}
customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);
</script>
</dom-module>