Quark Design 2.0 Release: Extending Web Component Styling with ::part

Quark Design 2.0, the second major release of the open‑source UI component library, introduces the ability for external code to penetrate the shadow DOM and modify any internal style of a component.

The library is a cross‑framework UI component set built on Web Components, allowing the same code to run in various front‑end frameworks or without a framework.

Previous limitation : Because Web Components use a shadow DOM, internal styles were isolated. The 1.x version relied on CSS variables to expose limited styling options, which could not cover all use cases (e.g., changing font‑style when no variable existed).

Example of the old approach:

// Using the component
/* Internal CSS source */
:host .quark-dialog-content {
    font-size: var(--dialog-content-font-size, 14px);
    color: var(--dialog-content-color, "#5A6066");
    // ... other styles
}

To style the component from outside, developers had to set the CSS variables:

.dialog {
    --dialog-content-font-size: 36px;
    --dialog-content-color: red;
}

This method fails when the component does not expose a needed variable.

New feature – ::part

Quark Design 2.0 leverages the ::part pseudo‑element, allowing any part of a shadow‑tree element to be styled directly from the outside.

Example usage:

// Using the component
.dialog::part(body) {
    font-size: 24px;
    color: #666;
}
.dialog::part(footer) {
    font-size: 14px;
    color: #333;
}

The ::part selector is supported by major browsers (see MDN documentation). A live demo is available at StackBlitz .

Quark Design 2.x remains fully backward compatible with all 1.x features, preserving existing CSS variables.

Developers are encouraged to build their own cross‑stack components using the underlying Quark core, available at https://github.com/hellof2e/quark-core .

Thank you to all contributors and users of Quark Design.