[CSS 3] Enabling CSS manipulation inside the shadow DOM using the part pseudo class
CSS The Class Using dom Part shadow inside
2023-09-14 09:00:46 时间
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); }
相关文章
- css opacity属性_CSS中的opacity属性[通俗易懂]
- The method assertEquals(double, double) from the type Assert is deprecated
- 【说站】css中transition的四种属性
- 【说站】css文本修饰text-decoration的使用
- 【说站】css超链接是什么
- css 实现文本溢出显示省略号
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )
- HTML + CSS + JS 利用邮编查询 API 实现邮编查询工具
- ORA-27611: Smart I/O failed due to a block corruption detected on the host. The block was received from cell “string”. disk: “string”, block: “string”, disk offset: “string” ORACLE 报错 故障修复 远程处理
- ORA-32019: The parameter SPFILE cannot be updated in the server parameter file. ORACLE 报错 故障修复 远程处理
- ORA-48410: The trace path exceeds the maximum number [string] ORACLE 报错 故障修复 远程处理
- The Power of Linux: Unleashing the Potential of OpenSource Software(linux英文)
- CSS 教程
- CSS 链接样式
- CSS 伪元素
- 行界面并掌握常用命令Note: The original prompt mentions 25character title but the provided Chinese alternative mentions 25word title. This response assumes the latter is the intended instruction.(怎样进入linux命令)
- Discover the Versatility of Tilda Linux: The Perfect Operating System for Tech Enthusiasts.(tildalinux)
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS如何影响MySQL的使用(css影响MySQL)
- 样式表CSS布局经验
- CSS教程之css选择器、属性、值
- 应用开发中涉及到的css和php笔记分享
- jQuery操作元素css样式的三种方法