Mention ::part() selector limitations & gotchas in Styling docs

[rolfsmeds]

It would be good if the parts-and-states page of the Styling docs would mention some limitations and gotchas of the ::part() selector, and link to the Shadow styling page as a workaround.

Examples:

• @keyframe animations defined in global css don't work on ::part()s
• Can't use :first-child, :nth-child etc selectors together with ::part()
• Can't target a child element of a part
• ::part() has higher specificity than anything in shadow DOM css, so you can easily override things you didn't mean to, such as states. So you need to write your selector to exclude states you don't want to override (e.g. vaadin-checkbox:not([checked])::part(checkbox) to style the checkbox in unchecked state without affecting the checked state)
• (suggest more in the comments if you have any :) )

---

If you think this issue is important, add a 👍 reaction to help the community and maintainers prioritize this issue.

[ssindelar]

It would be nice to integrate this in the documentation. I just tried to use :nth-child for 2 hours and wondered why it isn't working.