[SalesForce] Display Radio Group horizontal in LWC

I'm trying to display Radio Group horizontally in lwc, but it seems to be not applying my custom css.
HTML:

<template>
    <lightning-radio-group name="radioGroup"
                          label="Radio Group"
                          options={options}
                          value={value}
                          type="radio"
                          class="customRadioCls"></lightning-radio-group>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class RadioGroupBasic extends LightningElement {
    @track value = '';

    get options() {
        return [
            { label: 'Sales', value: 'option1' },
            { label: 'Force', value: 'option2' },
        ];
    }
}

CSS:

.THIS .customRadioCls{
    display : inline-block !important;
}

In CSS I tried many variation like

.THIS.customRadioCls{
        display : inline-block !important;
    }

In inspect element I can display horizontally, by applying in standard class, but same is not working from css file.

.slds-form-element__control .slds-radio {
    display: inline-block;
} 

Best Answer

This isn't possible because of CSS Isolation, a new feature in LWC. If you want a radio group that lays out horizontally, you'll have to write your own component.

Related Topic