javascript - HTML 标题属性未显示在影子 dom 元素中

Question

我使用 Web 组件创建了自己的 HTML 元素。它将一个按钮添加到其影子根。但是，尽管在 html 元素上设置了 title 属性，但将鼠标悬停在按钮上时不会绘制按钮的标题。我使用的是 Windows 10 和 Firefox 版本 58.0.2。有什么想法吗？

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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"></script>
<te-test></te-test>

Answer 1

我不知道这种行为是否是有意为之，但当我改变时

button.title = 'Title of my button';

至

this.title = 'Title of my button';

它有效。但正如您已经提到的，第一种方式似乎适用于其他操作系统和浏览器。因此 Mozilla 可能会在未来的版本中修复它。