web-components-part-demo

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/app-style.css">
  </head>

  <body>
    <template id="employees-custom-element">
      <style type="text/css">
          .card {
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
              transition: 0.3s;
              border-radius: 5px; /* 5px rounded corners */
              margin: 5px;
              cursor: pointer;
              min-width: 400px;
              max-width: 400px;
              flex: 1 1 200px;
          }

          img {
              border-radius: 2.5rem;
          }

          .card:hover {
              box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
          }

          .container {
              padding: 2px 16px;
          }

          *, ::before, ::after {
              box-sizing: border-box;
              padding: 1rem;
          }

          :host {
              display: flex;
              flex-wrap: wrap;
          }
      </style>
      <div part="card" class="card">
          <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" style="width:100%">
          <div class="container">
              <h4><b>Jane Doe</b></h4>
              <p>Principle Architect</p>
          </div>
      </div>
      <div part="card" class="card">
          <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
          <div class="container">
              <h4><b>John Doe</b></h4>
              <p>Software Engineer</p>
          </div>
      </div>
      <div part="card" class="card">
          <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" style="width:100%">
          <div class="container">
              <h4><b>J. Smith</b></h4>
              <p>Algorithms</p>
          </div>
      </div>
      <div part="card" class="card">
          <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
          <div class="container">
              <h4><b>J. Smith</b></h4>
              <p>AI</p>
          </div>
      </div>
    </template>

    <employees-custom-element></employees-custom-element>
    <script src="lib/employees-component.js"></script>
    <script src="lib/app.js"></script>
<script>
  
  
  
</script>
  </body>
</html>

const employeesTemplate = document.querySelector('#employees-custom-element');

class EmployeesComponent extends HTMLElement {
  cards;

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(employeesTemplate.content.cloneNode(true));
    this.cards = [...this.shadowRoot.querySelectorAll('.card')];
  }

  connectedCallback() {
    this.cards.forEach((card, index) => {
      card.addEventListener('click', (e) => {
        const name = card.querySelector('h4').innerText;
        const role = card.querySelector('p').innerText;
        const selectionEvent = new CustomEvent('cardSelection', {
          bubbles: true, composed: true, detail: { index, name, role }
        });
        this.dispatchEvent(selectionEvent);
      });
    });
  }

  toggleSelected(cardIndex) {
    const card = this.cards[cardIndex];
    const oldAttributeValue = card.getAttribute('part');
    if (oldAttributeValue.indexOf('selected') === -1) {
      card.setAttribute('part', `${oldAttributeValue} selected`);
    } else {
      card.setAttribute('part', `${oldAttributeValue.replace('selected', '')}`);
    }
  }
}

customElements.define(employeesTemplate.id, EmployeesComponent);

const employeesComponent = document.querySelector(employeesTemplate.id);
let selectedCard;

const element = employeesComponent.addEventListener('cardSelection', (e) => {
    const {index: cardIndex, name, role} = e.detail;
    employeesComponent.toggleSelected(cardIndex);
    if (selectedCard) employeesComponent.toggleSelected(selectedCard.index);
    selectedCard = e.detail;
});

employees-custom-element::part(card) {
    background: rgba(0, 0, 50, .5);
}

employees-custom-element::part(selected) {
    background: rgba(255, 0, 0, .5);
}