::part()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2020.
El pseudoelemento de CSS ::part representa cualquier elemento dentro de un shadow tree que tiene un atributo part coincidente.
css
custom-element::part(foo) { /* Estilos que se aplican al part `foo` */ } Sintaxis
css
::part(<ident>+) { /* ... */ } Ejemplos
HTML
html
<template id="tabbed-custom-element"> <style> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">Tab 1</div> <div part="tab">Tab 2</div> <div part="tab">Tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> CSS
css
tabbed-custom-element::part(tab) { color: #0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0d19; color: #ffffff; border-color: #0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0d33; color: #ffffff; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgb(10 132 255 / 30%); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } JavaScript
js
let template = document.querySelector("#tabbed-custom-element"); globalThis.customElements.define( template.id, class extends HTMLElement { constructor() { super().attachShadow({ mode: "open" }).append(template.content); } }, ); Resultado
Especificaciones
| Specification |
|---|
| CSS Shadow Parts # part |
Compatibilidad con navegadores
Véase también
- Atributo
part - Función pseudoclase
:state() - Atributo
exportparts - Módulo shadow parts de CSS