Styling parts in the shadow DOM

BBj Controls are implemented as WebComponents. The advantage of that concept is that they are implemented in a self-contained fashion. Typically an application developer does not need to manipulate its inner components directly as BBj implements theming, and offers a Theme editor to adjust the theme to your liking.

BBj offers certain API methods that are fully implemented in DWC. For instance, in order to change the background color of a BBjButton, you can use

myButton!.setBackColor(BBjAPI().makeColor("YELLOW"))

In one of the prior sections you also learned about

myButton!.setAttribute("theme","success")

which also has an impact on its color. But how to apply CSS directly to the inner elements of the BBjButton?

Plays from YouTube (youtube-nocookie.com). Loading the video sends data to Google.

Watch on YouTube

BBx Clues 10: Styling Parts of the Shadow DOM with CSS: https://www.youtube.com/watch?v=9HQBN-PVHWs

The solution is the ::part selector in CSS. In combination with the documented shadow parts for the BBjButton the CSS part to set the background color of the BBjButton will become

.yellow-bbj-button::part(control) {
        background-color:yellow;
}