Polymer 聚合物：OnClick内部组件

我有以下结构，问题是当对象被包装时，它不会捕获单击事件

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="sentiment-bar.html">

<!--
A widget bar
-->
<polymer-element name="bar-component">
  <template>
  <style>
  :host {
    margin: 20px;
    cursor: pointer;
  }
  </style>
  <div horizontal layout end id="sentimentBar">
    <sentiment-bar value="25" sentiment="very-negative" on-click="{{clickHandler}}"></sentiment-bar>
    <sentiment-bar value="15" sentiment="negative"></sentiment-bar>
    <sentiment-bar value="25" sentiment="neutral"></sentiment-bar>
    <sentiment-bar value="20" sentiment="positive"></sentiment-bar>
    <sentiment-bar value="15" sentiment="very-positive"></sentiment-bar>
    <paper-item label="Help"></paper-item>
  </span>
  </div>
</template>
<script>
Polymer('card-widget-sentiment', {
  clickHandler: function(){
      console.log(this);
  }
});
</script>
</polymer-element>

纸张项目按预期工作，另一方面，带有单击事件的情绪栏组件根本不工作。但是，如果情绪栏组件在该栏组件之外调用，它将按预期工作。可能是我不太了解的阴影DOM事件特性

---

查看更多的代码可能更容易。这里有一个jsbin可以正常工作：点击“x-baz”查看警报。好吧，我已经更新了这个问题，我想这是关于shadow DOM的问题，我还没有理解。我读到的仍然没有得到事件部分。调用Polymer的第一个参数与元素名称bar component不匹配。“你是怎么把东西展示出来的？”DirkGrappendorf，那是我的错。事实证明，阴影dom不是问题所在，问题在于另一个div在CSS中有一种奇怪的行为。多亏了robdodson，他的例子帮助我理解了很多事情。