[discussion]: Should we prefix ::part names for components?

[alionazherdetska]

In a discussion with @oliverschuerch, the question about prefixes for parts arose.

/* Unprefixed part, scoped by the element selector */
post-accordion,
post-accordion-item {
  &::part(button) {
    color: red;
  }
}

/* Prefixed part with our default prefix */
::part(post-accordion-button) {
  font-size: 20px;
}

Probem:

If un-scoped parts are being used, e.g. ::part(button), it's way simpler to write and multiple button parts can be targeted at the same time, but we're risking that a global style for another button part is interfering with our own parts.

Currently, we're using parts on some web components with generic names. Re-naming them would be breaking changes.

Affected components:

1. post-accordion-item
2. post-menu
3. post-tabs

[gfellerph]

I've voted for using a prefix because I see the potential for conflicts when using third party libraries when they are using generic parts styles like button, menu or similar to override our components as pretty big.

[alizedebray]

I voted for simple part names after checking several other web component design systems, none of which are using prefixed parts:

• spectrum
• carbon
• material
• fluentui
• liquid
• momentum
• astro
• forge
• UI5
• RedHat
• patternfly

Also, I personally think it aligns better with other pseudo-elements.
For example, ::first-letter can be used as:

• ::first-letter targets all first letters in the document
• p::first-letter targets first letters on all paragraphs
• #my-element::first-letter target the first letter of a specific element

This would then be the same for our parts:

• ::part(button) targets all button parts
• post-accordion-item::part(button) targets buttons within accordion items
• #my-accordion-item::part(button) targets the button of a specific accordion item

[oliverschuerch]

• ::part(button) targets all button parts in all components no matter if defined in our Design System components or in 3rd-party components.
• post-accordion-item::part(button) and ::part(post-accordion-item-button) both target buttons within accordion items.
  But in the first example, the element selector is optional (even if you document it as mandatory, devs can still leave it out) and then we're back at ::part(button).
  While the second example is properly scoped to our Design System accordion component and the chance to have an unwanted side effect is pretty small.
• #my-accordion-item::part(post-accordion-item-button) targets the button of a specific accordion item.

Imo, the question is, do we risk style leaks in favor of shorter part names, or do we strive for stronger scoped part names and accept the fact, that the part names become a little longer (while in most cases the selector length stays the same)?

[gfellerph]

I don't think I'll die on the prefixed hill because I can see the benefits of this approach as well. To me, it just becomes more important to look at other components when naming parts to make sure that other components button parts are similar to the current one. Otherwise, enabling styling them all together makes little sense to me. It could be a limitation or spark discussions if we encounter parts that are similar but not really the same. For example, I'm not sure if I want to style post-tabs::part(button), post-accordion::part(button) in the same rule.