Use CSS parts for customization?

[anderssonjohan]

Allowing people to modify the MDC properties directly would remove a bit of the purpose with the component encapsulation, but sometimes you want to have more open interfaces that allows the user to customize some internal parts of a component.

One example of such component is the limel-icon-button that consists of an MDC button with a lime-icon component inside. To expose all the properties of the limel-icon component, the limel-icon-button component need to export all these properties and also keep these updated if a new property is added to the limel-icon component.

If one want to add a custom CSS transform to the limel-icon component, it's possible to do so, but one can't do that with the limel-icon existing inside the limel-icon-button component. One approach to solve this would be to add CSS parts like <limel-icon part="icon" .../> to the icon inside the button. This could then be styled using a selector such as limel-icon-button::part(icon). The code using a component is by this attribute given access to an internal part of the component so it can be styled without the need of exporting/forwarding all the available properties of the internal component.

Note: The ::part() selector is now available in all major browsers, but could be too new as of today to use?

A recent article about this selector for more reading: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/

If this is something we should allow it should also be a part of Kompendium so the docs lists all available parts of a component that can be styled from "outside of the shadow DOM".

Environment

• lime-elements version:
• Framework used:
• Logs: