定制聚合物组件不会触发 sweetalert

问：

我用聚合物创建了一个自定义卡片组件

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>

      <!-- SweetAlert library -->
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const btn1 = document.getElementById('btn1');
          const btn2 = document.getElementById('btn2');

          btn1.addEventListener('click', () => {
            Swal.fire('Save Button Clicked');
          });

          btn2.addEventListener('click', () => {
            Swal.fire('Delete Button Clicked');
          });
        });
      </script>
    `;
  }

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

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

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

我正在使用这种方式

<custom-card title="Card Title" has-buttons>
    <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>

但是，在单击时，不会触发任何甜蜜警报。

我该如何解决？