我之前在旧版Firefox里也踩过这个坑，核心原因是早期浏览器对Web Components的Shadow DOM属性继承支持不完善。Shadow DOM本身是封装性设计，自定义元素宿主上的title属性不会自动传递到内部的按钮元素上，尤其是Firefox 58这种比较老的版本，完全不会处理这种跨Shadow边界的属性同步。

下面给你两个实用的解决方案：

方案一：显式同步title属性到内部按钮 #

这是最直接有效的办法，通过自定义元素的生命周期钩子，把宿主的title同步到Shadow Root里的按钮上，同时处理属性动态变化的场景：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow Root和内部按钮
    const shadow = this.attachShadow({ mode: 'open' });
    this.innerButton = document.createElement('button');
    this.innerButton.textContent = '点击我';
    shadow.appendChild(this.innerButton);
  }

  // 元素挂载到DOM时同步初始title
  connectedCallback() {
    this.updateButtonTitle();
  }

  // 声明需要监听的属性
  static get observedAttributes() {
    return ['title'];
  }

  // 当title属性变化时更新按钮的title
  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'title') {
      this.updateButtonTitle();
    }
  }

  // 同步title的工具方法
  updateButtonTitle() {
    this.innerButton.title = this.title || '';
  }
}

// 注册自定义元素
customElements.define('my-custom-element', MyCustomElement);

这样不管你是在HTML里写<my-custom-element title="这是提示文字"></my-custom-element>，还是后续通过JS动态修改元素的title属性，内部按钮的title都会同步更新，Firefox 58就能正常显示悬停提示了。

方案二：给自定义元素本身添加tooltip（备选） #

如果你不需要单独给按钮加tooltip，而是希望鼠标悬停整个自定义元素都显示提示，那可以不用管内部按钮，直接确保自定义元素本身的title能被浏览器识别。不过这个方案只适用于整个元素的tooltip需求，如果你必须让按钮单独触发提示，还是方案一更合适。

补充：旧版Firefox的局限性 #

Firefox 58发布于2018年，当时Web Components的标准还在完善阶段，浏览器对Shadow DOM的属性穿透支持非常有限。现代浏览器（比如Firefox 100+）可能会有一些优化，但旧版本必须手动处理这种跨Shadow边界的属性同步。

内容的提问来源于stack exchange，提问作者Andreas