Exposing part Attributes for Shadow DOM Elements

[zizther]

Firstly, thank you for all the work that has gone into this project. We’ve been integrating the component into a website and have found it straightforward to work with.

One challenge we’ve encountered is customising the appearance of elements within the component’s Shadow DOM. In particular, we’d like to style specific internal elements such as the toolbar, but currently there doesn’t appear to be a supported way to target these elements from outside the component.

As the component uses Shadow DOM, selectors such as:

cue-sync #toolbar { }

cannot access the internal elements, and the deprecated ::shadow / /deep/ approaches are no longer available in modern browsers.

Would it be possible to expose key internal elements using the part attribute? For example:

<div id="toolbar" part="toolbar"></div>

This would allow us to apply styling using:

cue-sync::part(toolbar) {
    /* custom styling */
}

It may not be necessary to expose every internal element, but exposing commonly customised areas such as toolbars, buttons, containers, panels, and status indicators could significantly improve integration flexibility.