[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 08:59:13 时间
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,基本语法
- MacOS安装Eclipse后启动报错:The JVM shared library "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/../lib/server/libjvm.dylib" does not contain the JNI_CreateJavaVM symbol.
- img垂直居中div - css样式
- HTTP Status 500 - The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application
- 非常有用的50个CSS代码片段
- [CSS] transform-origin: change the way of element's transformations
- [TypeStyle] Style CSS pseudo elements with TypeStyle
- [CSS] Showing horizontal scrollbar always for the table
- [CSS] Specify grid columns, rows, and areas at once with the grid-template shorthand
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
- [CSS] Targeting Elements with CSS Attribute Selectors
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- The total number of locks exceeds the lock table size错误(已纠正)
- sharepoint2010:The number of items in this list exceeds the list view threshold, which is 20000 items.
- [CSS] Change the Alignment of a Single Flexed Item with 'align-self'
- [React] Using the classnames library for conditional CSS
- CSS控制文字,超出部分显示省略号
- SAP Spartacus 4.0 源代码模式下开启 SSR,为什么会从本地去加载 all.css?
- css层叠导航栏
- The resource could not be loaded because the App Transport Security policy requires the use of a sec
- 成功解决MSB8020 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found. To build using the
- Normalize.css
- 3行3列表格 table实现,div+css实现
- 【2023年4月美赛加赛】Z题:The Future of the Olympics 思路、建模方案、数据来源、相关资料
- 【CSS】css弹性布局、CSS hack_08
- CSS — 内部样式几种常用写法(类、id)
- Sentinel采用SphO方式定义资源,报错:The order of entry exit can‘t be paired with the order of entry
- 【异常】FlinkException: The module flink-runtime-web could not be found in the class path
- vue-ant design示例大全——按钮本地css/js资源