如何从Shadow DOM向Light DOM返回自定义确认框的选择值？

下面是几种把Shadow DOM中确认框选择值传递到Light DOM的可行方法：

1. 自定义事件（推荐） #

通过触发自定义事件传递选择结果，这是Web Components里组件与外部通信的标准方式，能灵活处理异步选择场景。

示例代码：

class CustomConfirm extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .confirm-box { padding: 20px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .btn-group { margin-top: 15px; }
        button { padding: 8px 16px; margin-right: 10px; cursor: pointer; }
        #yesBtn { background: #007bff; color: white; border: none; border-radius: 4px; }
        #noBtn { background: #f8f9fa; border: 1px solid #ccc; border-radius: 4px; }
      </style>
      <div class="confirm-box">
        <p>${this.getAttribute('message') || '确定要执行此操作吗？'}</p>
        <div class="btn-group">
          <button id="yesBtn">是</button>
          <button id="noBtn">否</button>
        </div>
      </div>
    `;
    
    this.shadowRoot.getElementById('yesBtn').addEventListener('click', () => this._onChoice(true));
    this.shadowRoot.getElementById('noBtn').addEventListener('click', () => this._onChoice(false));
  }

  _onChoice(isConfirm) {
    // 触发自定义事件，携带选择结果
    this.dispatchEvent(new CustomEvent('confirm-done', {
      detail: { confirmed: isConfirm },
      bubbles: true,
      composed: true
    }));
    // 选择完成后移除组件
    this.remove();
  }
}

customElements.define('custom-confirm', CustomConfirm);

外部使用时监听事件：

// 创建并插入确认框
const confirmBox = document.createElement('custom-confirm');
confirmBox.setAttribute('message', '确定要删除这条数据吗？');
document.body.appendChild(confirmBox);

// 监听选择结果
confirmBox.addEventListener('confirm-done', (e) => {
  if (e.detail.confirmed) {
    console.log('用户选择“是”，执行删除逻辑');
    // 这里写你的业务代码，比如调用接口删除数据
  } else {
    console.log('用户选择“否”，取消操作');
  }
});

2. 同步组件属性 #

将选择结果同步到组件的自定义属性上，外部可以直接读取属性值，或者监听属性变化触发后续逻辑。

示例代码：

class CustomConfirm extends HTMLElement {
  static get observedAttributes() {
    return ['confirmed'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.confirmed = null;
    this.shadowRoot.innerHTML = `
      <style>/* 样式同前 */</style>
      <div class="confirm-box">
        <p>${this.getAttribute('message') || '确定要执行此操作吗？'}</p>
        <div class="btn-group">
          <button id="yesBtn">是</button>
          <button id="noBtn">否</button>
        </div>
      </div>
    `;
    
    this.shadowRoot.getElementById('yesBtn').addEventListener('click', () => this._setChoice(true));
    this.shadowRoot.getElementById('noBtn').addEventListener('click', () => this._setChoice(false));
  }

  _setChoice(isConfirm) {
    this.confirmed = isConfirm;
    this.setAttribute('confirmed', isConfirm);
    this.remove();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'confirmed' && newValue !== oldValue) {
      // 内部可触发额外逻辑，也允许外部通过MutationObserver监听
      console.log('选择结果更新:', newValue === 'true');
    }
  }
}

customElements.define('custom-confirm', CustomConfirm);

外部使用：

const confirmBox = document.createElement('custom-confirm');
document.body.appendChild(confirmBox);

// 用MutationObserver监听属性变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'confirmed') {
      const isConfirmed = confirmBox.getAttribute('confirmed') === 'true';
      if (isConfirmed) {
        // 执行“是”的业务逻辑
      } else {
        // 执行“否”的业务逻辑
      }
      observer.disconnect();
    }
  });
});
observer.observe(confirmBox, { attributes: true });

3. Promise封装（适合异步场景） #

给组件添加show()方法，返回Promise，用户选择后resolve结果，外部用async/await调用，代码更简洁直观。

示例代码：

class CustomConfirm extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>/* 样式同前 */</style>
      <div class="confirm-box">
        <p id="msgText">确定要执行此操作吗？</p>
        <div class="btn-group">
          <button id="yesBtn">是</button>
          <button id="noBtn">否</button>
        </div>
      </div>
    `;
    
    this._resolve = null;
    this.shadowRoot.getElementById('yesBtn').addEventListener('click', () => this._resolveChoice(true));
    this.shadowRoot.getElementById('noBtn').addEventListener('click', () => this._resolveChoice(false));
  }

  show(message) {
    if (message) {
      this.shadowRoot.getElementById('msgText').textContent = message;
    }
    document.body.appendChild(this);
    return new Promise(resolve => {
      this._resolve = resolve;
    });
  }

  _resolveChoice(isConfirm) {
    this._resolve(isConfirm);
    this.remove();
  }
}

customElements.define('custom-confirm', CustomConfirm);

外部使用：

async function handleDelete() {
  const confirmBox = new CustomConfirm();
  const isConfirmed = await confirmBox.show('确定要删除这条数据吗？');
  
  if (isConfirmed) {
    console.log('用户确认删除，执行接口请求');
    // 调用删除接口等业务逻辑
  } else {
    console.log('用户取消删除');
  }
}

// 触发确认流程
handleDelete();

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