How to center "radio-wrapper"?

Ionic Framework Ionic Vue
1

I have 2 questions.

  1. I understand the reasoning behind opting for Shadow DOM based CSS (encapsulation). But why don’t you expose all the parts of the components? Why do you have to only expose specific parts, which I can customize then if needed, but it is not possible to customize inside shadow dom parts which don’t have ::part() on them

I keep being blocked again and again by this reason, and I don’t understand what is the problem of exposing all parts of inner ionic component to customization with ::part() attributes, please somebody explain to me

  1. Second question stems from the first.
    As you can see on the screen shot, I need to center the inner container, which is hidden inside the shadow dom and has a class of “radio-wrapper”. But I cannot customize this part - because there is no ::part() on it (no pun intended)
    Then, in documentation they say we have justify attribute (just like justify-content - but it’s not), which has 3 options: start, end and space-between.
    And it does work - except I need center - which is arguably one of the most needed, and it’s not there? Why is it not there? I just tried via devtools adding justify-content: center; - and it centers it perfectly, yet this option is unavailable for justify attribute.

Please, somebody help me or explain the reasoning behind it, I am going insane with this framework

test
test1280×426 62.8 KB

2

UPD: The solution was found by my colleague

ion-radio::part(label) {
    margin: 0 auto;
  }

But this is nowhere near intuitive, and yes, its a “skill issue” - but it would’ve been more developer friendly if center option was there and all parts were exposed via the ::part() .