Custom polymer component not triggering sweetalert

Question

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?

Answer 1

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

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

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

Answer 2

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>