Hello all,
Sometimes we come accross a situations where we want to style the components to such an extent that we need to change the style(s) of Calcite components in the shadowroot. However this is not always straightforward or easy to implement in our experience (in our case, mainly for the table component).
The use of parts can make styling the components more accesible for developers. By providing part names to different elements of the component, the developer can add their own styling using CSS to specifically those elements. Below is a small example of the implementation and usage of parts in a component. In this example, the useage of parts allows us to style specific elements of a table element, were we can quite easily set the CSS properties for the elements without diving in to the shadow root or managing CSS variables.
The component:
render() {
return html`
<div part="main">
<div part="heading"></div>
<div part="body">
<div part="row"></div>
</div>
</div>
`
}
The CSS styling:
calcite-table::part(main) {
color: blue;
}
calcite-table::part(heading):hover {
background-color: black;
color: white;
}
calcite-table::part(body) {
padding: 2rem;
}
calcite-table::part(row) {
margin-left: .5rem;
}
Other solutions / alternatives have been provided, for example the use of CSS variables that have been added to Calcite. These give you some more control over certain properties, such as the color, (border) sizing, etc. However, while those are good to use for those cases, they can't be used to change variables like the display type or flex direction (etc.). We think that the use of parts can make this process more flexible, and elimiate the issue that some properties do not have a CSS variable or are not able the be changed with a CSS variable.
Parts are a often used web-standard, we think that the ease of use and the added flexibility that parts provide can be benefitial for many developers. Additionally, the use of parts is optional, so developers do not have the use it (or update) their projects.
(The use of parts might also make it possible to easily change the style of the web components of the ArcGIS Javascript SDK, for example the feature table)
Hopefully you can take this idea in to consideration!
Kind regards,
Reint.
