Polymer 2 event bubbling

According to documentation, function x(e,d,t) in file index.html would not be called, but in fact it is. Am I misunderstanding something?

dom-element.html

<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<dom-module id="dom-element">
  <template>
    <button on-click="c">Click me!</button>
  </template>
  <script>
    class DomElement extends Polymer.Element {
      static get is() { return "dom-element"; }
      c(){
        /* this.dispatchEvent(new CustomEvent('x',{bubbles:true,composed:true,detail:"We do not need this to work!"})); */
        this.dispatchEvent(new CustomEvent('x',{detail:"yes"}));
      }
    }
    customElements.define(DomElement.is, DomElement);
  </script>
</dom-module>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="dom-element.html">
  </head>
  <body>
    <dom-module id="root-element">
      <template>
          <dom-element on-x="x"></dom-element>
      </template>
      <script>
        class RootElement extends Polymer.Element{
          static get is() {return 'root-element'}
            x(e,d,t){
                console.log(d);
              }
        }
        customElements.define(RootElement.is,RootElement);
      </script>
    </dom-module>
    <root-element></root-element>
  </body>
</html>

Solution

Event 'x' fired by <dom-element> in <root-element> doesn't cross shadow dom boundaries. <root-element> listens to an element in its own shadow dom, <dom-element>, which is the sender of the 'x', there is no boundary crossing involved.