Radio group in form data

[Kian-Esmaeilpour]

I created a simple form to check the behavior of inputs inside radio shadow DOM. If the input element inside, it's content not accessible with the form data

	let form = document.querySelector('#radio-form');
	form.addEventListener('submit', (e) => {
		e.preventDefault();
		const form = document.querySelector('form');
		const data = Object.fromEntries(new FormData(form).entries()); //data is empty
	});

Currently, the only way to get the value of the radio group is to subscribe to the event:

    this.refs['radio'].addEventListener(
    	'radio-selected', (e) => { this.setState({value: e.detail.value}); }
    );

Or directly get value on submit:

    const value = this.refs['radio'].value;

If we want ts-radio-group to work with the form data we can:

1. Use hidden <input> element instead of <ts-radio> inside <ts-radio-group> slot. Generate visual representation of those inputs with the<ts-radio> in the shadow DOM, and update the slotted input state on change. Requires major reimplementation of ts-radio-group component, to make it more reactive.
2. Generate hidden <input> with unique id element in the light DOM, next to <ts-radio-group>, like it's done in the weightless components. The simple and effective way. It can be easily implemented as the base class and could be used for any form element.
3. Make slot inside each of the radio element, and ask developers to put <input> inside the slot manually, if they need native forms behavior. Update <input> properties inside ts-radio logic.

Originally posted by @kirill-kolombet in #221