feat: checkbox, radio, range, toggle expose label shadow part

[muuvmuuv]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

As for all other input elements like ion-select and ion-input, ion-range should also get the new implementation of labels with a part attribute attached for styling and customizations.

Describe the Use Case

I am building a consistent styling for all input elements in our app where the label is outside the input box, but the input box has a shadow and other styling. This works for all other elements pretty well, thanks for the work in that.

Describe Preferred Solution

Slots

Describe Alternatives

No shadow-dom

Related Code

No response

Additional Information

I remember that there have been a lot of label issues opened, but couldn't find one related to slots and ion-range.

[liamdebeasi]

Hey there,

I'm not sure I fully understand this feature request. Range already has a label slot: https://ionicframework.com/docs/api/range#slots

[muuvmuuv]

Ah yes, sorry, it's not clear because it is both named “slot”. I mean for styling, that I have a slot in HTML to select via CSS when it is in the shadow-dom. Alternatively, avoid shadow-dom like it's in some other ion components when using labels. I think it is really inconsistent between components.

[liamdebeasi]

When using the label slot all of the content is in the light DOM, so you can style it directly: https://codepen.io/liamdebeasi/pen/qBLgdpR

Using the label slot is our recommendation for when you need to use custom HTML/CSS. The label property is great for plaintext use cases, though not so much for the use case you provided. This is why we provide both options.

edit:

Also worth noting that you can use the same label slot approach I provided above for inputs and selects too if you want to reduce code duplication.

[muuvmuuv]

Liam I am so sorry, I meant "part"... hard week, pretty under stress with migrating our forms module and implementing other features.

Here is my repl. You see that range has shadow-dom without [part], ion-input has no shadow-dom and ion-select has shadow-dom but with [part]. That is what I meant with inconsistency.

https://codepen.io/muuvmuuv-the-selector/pen/ExGrjRg