阴影 dom 元素中未显示 HTML 标题属性答案

【问题标题】：HTML title attribute not shown in shadow dom elements阴影 dom 元素中未显示 HTML 标题属性
【发布时间】：2018-03-10 11:03:50
【问题描述】：

我使用 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>

【问题讨论】：

对我来说，在 Mac 上的 Firefox 58 上显示标题属性和标题工具提示。
实际上现在它可以与@BrettDeWoody 更正一起使用（即添加了polyfill）

标签： javascript html attributes web-component native-web-component

【解决方案1】：

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

button.title = 'Title of my button';

到

this.title = 'Title of my button';

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

【讨论】：

错误在 v59 中仍然存在

【解决方案2】：

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

【讨论】：