title: polymer 1.0 event firing among nested components
body: <p>I have a problem in Polymer 1.0 related to event propagation within a nested structure of web components. In particular, I am trying to dynamically configure a web component named <code>wc-split</code> by means of a collection of other components named <code>wc-split-rule</code> located within its local DOM. The following snippet of code shows a correct form of use:</p>
  
  <pre><code>&lt;wc-split-test&gt;
      &lt;wc-split&gt;
          &lt;wc-split-rule key="{{k1}}" ...&gt;&lt;/wc-split-rule&gt;
          &lt;wc-split-rule key="{{k2}}" ...&gt;&lt;/wc-split-rule&gt;
          &lt;wc-split-rule key="{{k3}}" ...&gt;&lt;/wc-split-rule&gt;
     &lt;/wc-split&gt; 
  &lt;/wc-split-test&gt;
  </code></pre>
  
  <p>As it can be seen in the previous example, the aim is to provide to the <code>wc-split</code> component the values on <code>key</code> attributes within each <code>wc-split-rule</code> component. As we need dynamic reconfiguration capabilities, the architectural strategy starts by firing an event each time a change in <code>key</code> attributes is met and those changes are promoted by bubbling up to reach the <code>wc-split</code> component, which process them. </p>
  
  <p>The followed approach works properly when [1] it is both tested in a pure HTML context with literal values and [2] within a component template with data-bound values. Nevertheless, [3] when it is tested within a component template using literal values,  changes are not promoted. It seems that event propagation are ignored or listener defined in <code>wc-split</code> does not catch the event:</p>
  
  <pre><code>&lt;wc-split-test&gt;
      &lt;wc-split&gt; &lt;!-- does not work --&gt;
          &lt;wc-split-rule key="k1" ...&gt;&lt;/wc-split-rule&gt;
          &lt;wc-split-rule key="k2" ...&gt;&lt;/wc-split-rule&gt;
          &lt;wc-split-rule key="k3" ...&gt;&lt;/wc-split-rule&gt;
      &lt;/wc-split&gt;
  &lt;/wc-split-test&gt;
  </code></pre>
  
  <p>The following listing shows implementation of both components [<a href="https://goo.gl/OkU9jQ]" rel="nofollow">https://goo.gl/OkU9jQ]</a>:</p>
  
  <pre><code>    &lt;dom-module id="wc-split-rule"&gt;
          &lt;script&gt;                
              Polymer({
                  is: 'wc-split-rule',  
  
                  properties: {
                      key  : {
                          type: String,
                          reflectToAttribute: true,
                          notify: true,
                          value: '',
                          observer: '_changed'
                      },
                  }, 
  
                  _changed: function (){
                      this.fire('wc-split-rule', {
                          key     : this.key,
                      });                        
                  }    
  
              });
          &lt;/script&gt;
      &lt;/dom-module&gt;
  
  
      &lt;dom-module id="wc-split"&gt;   
          &lt;template&gt;
             &lt;content&gt;&lt;/content&gt;         
          &lt;/template&gt;
  
          &lt;script&gt;     
              Polymer( { 
                  is: 'wc-split', 
  
                  listeners: {
                      'wc-split-rule': 'onRule'
                  },
  
                  ready: function(){
                     ...
                  },
  
                  onRule: function (event, context){
                      ... // this is executed in test [1] and [2] NOT in [3]                        
                  }
              });     
          &lt;/script&gt;
  
      &lt;/dom-module&gt;
  
  
      &lt;dom-module id="wc-split-test"&gt;          
          &lt;template&gt;              
              &lt;wc-split id="split"&gt;
                  &lt;wc-split-rule key="e1"/&gt;                        
              &lt;/wc-split&gt;            
          &lt;/template&gt;
  
          &lt;script&gt;     
              ...
          &lt;/script&gt;
  
      &lt;/dom-module&gt;
  </code></pre>
  
  <p>Surprisingly, the same code on Polymer 0.5 works properly for each test scenario [<a href="https://goo.gl/CHV3JE]" rel="nofollow">https://goo.gl/CHV3JE]</a>:</p>
  
  <pre><code>    &lt;polymer-element name="wc-split-rule"&gt;  
          &lt;script&gt;
  
              Polymer('wc-split-rule', {
                  publish : {
                      key     : '',                       
                  },
  
                  observe: {
                      key     : '_changed',                       
                  },
  
                  _changed: function (){
                      this.fire('wc-split-rule', {
                          key     : this.key,
                      });                        
                  }    
  
              });
          &lt;/script&gt;
      &lt;/polymer-element&gt;
  
  
      &lt;polymer-element name="wc-split"&gt;
          &lt;template&gt;
              &lt;div on-wc-split-rule="{{onRule}}"&gt;
                  &lt;content select="wc-split-rule"&gt;&lt;/content&gt;
              &lt;/div&gt;
              &lt;content&gt;&lt;/content&gt;        
          &lt;/template&gt;
          &lt;script&gt;
  
              Polymer('wc-split', {                    
  
                  ready: function(){
                      ...
                  },                   
  
                  onRule: function (event, context){
                      ... // this is always executed
                  }
              });     
          &lt;/script&gt;
  
      &lt;/polymer-element&gt;
  
  
       &lt;polymer-element name="wc-split-test"&gt;
          &lt;template&gt;              
              &lt;wc-split id="split"&gt;
                  &lt;wc-split-rule key="e1"/&gt;                        
              &lt;/wc-split&gt;            
          &lt;/template&gt;
  
          &lt;script&gt;
              ...
          &lt;/script&gt;
  
      &lt;/polymer-element&gt;       
  </code></pre>