title: HTML title attribute not shown in shadow dom elements
body: <p>I created my own HTML Element with web components. It adds a button to its shadow root. But the title of the button is not drawn when hovering over it, although the title attribute is set on the html element. I am using Windows 10 and Firefox version 58.0.2. Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Test extends HTMLElement {
    constructor() {
      super();
  
      var shadow = this.attachShadow({
        mode: 'open'
      });
      var button = document.createElement('input');
      button.type = 'button';
      button.value = 'Test button';
      button.title = 'Title of my button';
  
      shadow.appendChild(button);
    }
  }
  
  
  customElements.define('te-test', Test);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"&gt;&lt;/script&gt;
  &lt;te-test&gt;&lt;/te-test&gt;</code></pre>
  </div>
  </div>
  </p>