::part()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

::part CSS 의사 요소 는 shadow tree 내에서 일치하는 part 특성을 가진 모든 요소를 나타냅니다.

css
custom-element::part(foo) { /* `foo` part 에 적용할 스타일 */ }

구문

css
::part(<ident>+) { /* ... */ }

예제

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

결과

명세서

Specification
CSS Shadow Parts
# part

브라우저 호환성

같이 보기