Custom polymer component not triggering sweetalert

I have created a custom card component in polymer

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);

and i am using this way

<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>

However on click no sweetalert is fired.

How can i fix it?

Why a 6KB Lit library, which you hardly use.
In the same time you learned Lit you can learn native JavaScript Web Components

• which has no dependencies,
• requires no build step
• is smaller,
• is faster
• and is more maintainable because you won't have to worry about any future Framework updates causing breaking changes.

> Use an axe to chop one block, use a chainsaw to chop down the tree

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

customElements.define('notification-item', class extends HTMLElement {
static get observedAttributes() {
return ["title", "subtitle", "imageurl", "relativetime", "dotcolor"];
};
constructor() {
super().attachShadow({mode:"open"}).innerHTML = this.html();
this.shadowRoot.querySelector('[type="checkbox"]')
.onclick = (evt) => this.checkboxClick(evt);
}
checkboxClick(evt) {
// Open SweetAlert here Swal.fire('Checkbox Clicked!');
alert("checkboxClick")
}
attributeChangedCallback(name, oldValue, newValue) {
let el = this.shadowRoot.getElementById(name);
if (el) {
if (name == "imageurl") el.src = newValue;
else if (name == "dotcolor") el.style.color = newValue;
else el.innerHTML = newValue;
} else {
console.warn("No:", name);
}
}
html() {
return `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<style>
.notification-item {border:1px solid black;border-radius:10px;padding:20px;margin-bottom:20px;transition: opacity 0.3s ease}
.notification-item:hover {opacity:0.8}
.custom-checkbox {width: 14px;height:14px}
</style>
<div class="notification-item">
<div class="row align-items-center">
<div class="col-1">
<input type="checkbox" class="custom-checkbox"/>
<i class="fas fa-circle" id="dotcolor"></i>
</div>
<div class="col-2">
<img id="imageurl"
alt="Profile"
width="60"
height="60"
class="img-fluid rounded-circle"
/>
</div>
<div class="col-6">
<div class="fw-bold" id="title"></div>
<div id="subtitle"></div>
</div>
<div class="col-2">
<div id="relativetime"></div>
</div>
<div class="col-1">
<i class="fas fa-bookmark"></i>
</div>
</div>
</div>`}
});

<!-- language: lang-html -->

<notification-item 
title="An image you viewed has been updatedsss" 
subtitle="Imagedddd updated"
imageurl="https://images.freeimages.com/fic/images/icons/747/network/256/user_group.png"
relativetime="Posted 2d hours ago" dotcolor="green"></notification-item>
<!-- FA icons require loading in the main document AND the Web Component -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<!-- end snippet -->

I switched to lit element and my component now works

import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';
class NotificationItem extends LitElement {
static styles = css`
.notification-item {
border: 1px solid black;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
transition: opacity 0.3s ease;
}
.notification-item:hover {
opacity: 0.8;
}
.custom-checkbox {
width: 14px;
height: 14px;
}
`;
static properties = {
title: { type: String },
subtitle: { type: String },
imageurl: { type: String },
relativetime: { type: String },
dotcolor: { type: String },
};
handleCheckboxClick() {
// Open SweetAlert here
Swal.fire('Checkbox Clicked!');
}
render() {
return html`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="notification-item">
<div class="row align-items-center">
<div class="col-1">
<input
type="checkbox"
class="custom-checkbox"
@click=${this.handleCheckboxClick}
/>
<i class="fas fa-circle" style="color: ${this.dotcolor};"></i>
</div>
<div class="col-2">
<img
src="${this.imageurl}"
alt="Profile"
width="60"
height="60"
class="img-fluid rounded-circle"
/>
</div>
<div class="col-6">
<div class="fw-bold">${this.title}</div>
<div>${this.subtitle}</div>
</div>
<div class="col-2">
<div>${this.relativetime}</div>
</div>
<div class="col-1">
<i class="fas fa-bookmark"></i>
</div>
</div>
</div>
`;
}
}
customElements.define('notification-item', NotificationItem);

and used it like this

    <notification-item
title="An image you viewed has been updatedsss"
subtitle="Imagedddd updated"
imageurl="https://images.freeimages.com/fic/images/icons/747/network/256/user_group.png"
relativetime="Posted 2d hours ago"
dotcolor="green"
></notification-item>