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

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 修复。

Answer 2

我在 Mac 上的 Chrome 64.0.3282.186 中看到了标题：