我使用 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>
最佳答案
我不知道这种行为是否是有意为之,但当我改变时
button.title = 'Title of my button';
至
this.title = 'Title of my button';
它有效。但正如您已经提到的,第一种方式似乎适用于其他操作系统和浏览器。因此 Mozilla 可能会在未来的版本中修复它。
关于javascript - HTML 标题属性未显示在影子 dom 元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49208325/