Add ::part() selector support to chips in MultiSelectComboBox

[rolfsmeds]

Describe your motivation

The vaadin-multi-select-combo-box-chip components used in vaadin-multi-select-combo-box cannot be properly styled using the ::part() selector for two reasons:

• The chips are inside the parent element's shadow DOM, and while the chips' root elements are targetable through the chip part name, their inner parts (label, remove-button) are not.
• The chips have their own focused state, which is only modelled as an attribute, and thus not targetable with ::part()

Describe the solution you'd like

1. Reflect the chips' focused state as a dynamically applied part name, e.g. <vaadin-multi-select-combo-box-chip part="chip focused" ...>
2. Expose the chips' internal parts through the parent element using exportparts, i.e. add exporparts="label:chip-label remove-button:chip-remove-button focused:chip-focused" to vaadin-multi-select-combo-box.

Describe alternatives you've considered

Alternatively, we could consider slotting the chips so that they would be in light DOM.

Additional context

We need to decide a naming scheme for sub-parts and state parts. Some options:

• Just use a dash separator for everything: chip-remove-button, chip-focused
• BEM style: chip__remove-button, chip--focused (__ for elements/subparts, -- for modifiers/states)

[jouni]

Would it be a feasible alternative to slot in the chips, instead of keeping them in the shadow DOM of MSCB?

[rolfsmeds]

Possibly – that's the plan for most (maybe all) other similar cases. Forgot to add that to the "alternatives" section, thanks.