The term **"Electronic parts"** in the context of CSS typically refers to the **`::part`** pseudo-element, which is a crucial feature of the Web Components standard. It allows developers to style specific elements inside a Shadow DOM from a global CSS file. --- ### 1. Understanding `::part` and `part` When using Shadow DOM, styles are usually encapsulated (locked away). The `part` attribute acts as a "bridge" that exposes specific internal elements to external styling. | Feature | Attribute/Selector | Purpose | | :--- | :--- | :--- | | **Exposure** | `part="name"` | Added to an element *inside* the Shadow DOM. | | **Styling** | `::part(name)` | Used in *external* CSS to target the exposed part. | --- ### 2. How it Works (Code Example) #### The Component (Inside the Shadow DOM) Imagine a custom button component where we want to let users change the color of the inner label. ```html ``` #### The External CSS Even though the `` is hidden inside the Shadow DOM, we can style it using the name assigned to the `part` attribute. ```css /* This targets the span with part="label" */ my-custom-button::part(label) { color: cyan; font-weight: bold; text-transform: uppercase; } ``` --- ### 3. Key Rules and Limitations 1. **Encapsulation Break:** Only elements explicitly marked with `part=""` are reachable. You cannot reach nested children of a part (e.g., `::part(label) div` will not work). 2. **Multiple Parts:** An element can have multiple part names: `part="label icon-container"`. 3. **Pseudo-classes:** You can combine parts with states: ```css my-button::part(label):hover { color: red; } ``` 4. **The "Exportpart" attribute:** If you have nested components, you use `exportparts` to pass a part from an inner component up to the outer component so the global CSS can see it. --- ### 4. Comparison with CSS Variables While `::part` allows for direct property control, many developers use **CSS Custom Properties (Variables)** alongside it. | Method | Best For | | :--- | :--- | | **CSS Variables** | Theming (colors, spacing) that affects many elements at once. | | **`::part`** | Deep structural styling of specific, individual components. |