::part()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020년 7월⁩.

::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

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

브라우저 호환성

같이 보기

part 특성
:state() 의사 클래스 함수
exportparts 특성
CSS shadow parts 모듈

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025년 12월 4일⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content