javascriptpolymerlit

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?


Solution

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

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