zoukankan      html  css  js  c++  java
  • [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);
    }
  • 相关阅读:
    es6扩展运算符深浅拷贝
    将工作慢慢移向python
    OpenGL
    翻译的一篇关于Normal Matrix (normal transformation)的文章
    顾城的诗
    复杂的C运行时库
    glut and glew
    setting boot up order in grub2
    Perlin Noise
    GL 与 CV 管线 (pipeline) 比较与相互转换
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13899555.html
Copyright © 2011-2022 走看看