Polymer自定义卡片组件无法触发SweetAlert弹窗问题求助

你的代码存在几个关键问题，导致按钮点击无法触发SweetAlert弹窗：

• DOMContentLoaded事件时机错误：组件模板内的<script>监听DOMContentLoaded，但该事件在页面初始加载完成后就会触发，此时组件slot中的按钮还未插入到组件DOM树中，document.getElementById无法找到目标元素，事件绑定自然失效。
• 脚本重复加载风险：将SweetAlert的<script>放在组件模板里，会导致每个组件实例都重复加载该脚本，既浪费资源又可能引发冲突。
• ID选择器不适用于组件场景：如果页面存在多个<custom-card>实例，相同ID会导致选择器匹配错误，违背组件复用的设计原则。

修复方案 #

1. 调整SweetAlert脚本的引入位置

将SweetAlert脚本移到页面全局区域（比如<head>标签内），避免在组件模板中重复加载：

<!-- 在页面<head>中引入SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

2. 使用Polymer生命周期钩子绑定事件

改用组件的connectedCallback生命周期钩子，结合事件委托监听按钮点击，避免依赖ID选择器：

修改后的组件代码：

import { PolymerElement, html } from 'https://cdnjs.cloudflare.com/ajax/libs/polymer/3.5.1/polymer-element.js';

class CustomCard extends PolymerElement {
  static get template() {
    return html`
      <style>
        .card {
          border: 1px solid black;
          border-radius: 4px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          background-color: #fff;
        }
        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: indigo;
          padding: 10px;
          color: white;
        }
        .card-title {
          text-align: [[_getTitleAlignment(hasButtons)]];
        }
        .card-buttons {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .card-body {
          padding: 10px;
        }
      </style>

      <div class="card">
        <div class="card-header">
          <div class="card-title">[[title]]</div>
          <div class="card-buttons" hidden$="[[!hasButtons]]">
            <slot name="buttons"></slot>
          </div>
        </div>
        <div class="card-body">
          <slot name="body"></slot>
        </div>
      </div>
    `;
  }

  static get properties() {
    return {
      title: {
        type: String,
        value: '',
      },
      hasButtons: {
        type: Boolean,
        value: false,
      },
    };
  }

  connectedCallback() {
    super.connectedCallback();
    // 事件委托监听按钮点击
    this.addEventListener('click', (e) => {
      if (e.target.closest('#btn1')) {
        Swal.fire('Save Button Clicked');
      } else if (e.target.closest('#btn2')) {
        Swal.fire('Delete Button Clicked');
      }
    });
  }

  _getTitleAlignment(hasButtons) {
    return hasButtons ? 'left' : 'center';
  }
}

customElements.define('custom-card', CustomCard);

3. 更优方案：组件事件传递（推荐）

如果希望组件更具复用性，建议通过自定义事件将按钮点击事件传递给父组件，由父组件处理弹窗逻辑，让组件职责更清晰：

修改后的组件关键代码

connectedCallback() {
  super.connectedCallback();
  this.addEventListener('click', (e) => {
    const btn = e.target.closest('button');
    if (!btn) return;
    // 触发自定义事件
    if (btn.id === 'btn1') {
      this.dispatchEvent(new CustomEvent('save-click', { bubbles: true, composed: true }));
    } else if (btn.id === 'btn2') {
      this.dispatchEvent(new CustomEvent('delete-click', { bubbles: true, composed: true }));
    }
  });
}

父页面使用时处理事件

<custom-card title="Card Title" has-buttons id="myCard">
  <div slot="buttons">
    <button id="btn1" class="btn btn-primary">
      <i class="fas fa-save"></i> Save
    </button>
    <button id="btn2" class="btn btn-danger">
      <i class="fas fa-trash"></i> Delete
    </button>
  </div>
  <div slot="body">
    <p>This is the content of the card.</p>
  </div>
</custom-card>

<script>
  const card = document.getElementById('myCard');
  card.addEventListener('save-click', () => Swal.fire('Save Button Clicked'));
  card.addEventListener('delete-click', () => Swal.fire('Delete Button Clicked'));
</script>

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