[CSS 3] Enabling CSS manipulation inside the shadow DOM using the part pseudo class

The part pseudo class allows consumers of a web component to manipulate certain key elements inside the Shadow DOM. In this lesson we will explore two use cases to using the part pseudo class.

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