junaidbhura/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Web Components</title>
	<style type="text/css">
		jb-toggle-buttons {
			display: flex;
		}
		jb-toggle-button button {
			background-color: gray;
		}
		jb-toggle-button[selected] button {
			background-color: blue;
		}
	</style>
</head>
<body>

	<jb-toggle-buttons value="">
		<jb-toggle-button value="button-1"><button>Button 1</button></jb-toggle-button>
		<jb-toggle-button value="button-2"><button>Button 2</button></jb-toggle-button>
		<jb-toggle-button value="button-3"><button>Button 3</button></jb-toggle-button>
	</jb-toggle-buttons>

	<script>
		/**
		 * ToggleButtons Class.
		 */
		class ToggleButtons extends HTMLElement {
			/**
			 * Constructor.
			 */
			constructor() {
				super();

				this.buttons = this.querySelectorAll( 'jb-toggle-button' );
			}

			/**
			 * Observe Attributes.
			 *
			 * @return {string[]} Attributes to be observed.
			 */
			static get observedAttributes() {
				return [ 'value' ];
			}

			/**
			 * Get value.
			 *
			 * @return {string} Value.
			 */
			get value() {
				return this.getAttribute( 'value' ) ?? '';
			}

			/**
			 * Set value.
			 *
			 * @param {String} value Value.
			 */
			set value( value ) {
				this.setAttribute( 'value', value );
			}

			/**
			 * Attribute changed callback.
			 *
			 * @param {string} name     Attribute Name.
			 * @param {string} oldValue Attribute's Old Value.
			 * @param {string} newValue Attribute's New Value.
			 */
			attributeChangedCallback( name, oldValue, newValue ) {
				if ( ! this.buttons ) {
					return;
				}

				this.buttons.forEach( ( button ) => button.removeAttribute( 'selected' ) );

				if ( '' !== newValue ) {
					this.buttons.forEach( ( button ) => {
						if ( newValue === button.getAttribute( 'value' ) ) {
							button.setAttribute( 'selected', 'selected' );
						}
					} );
				}
			}
		}

		/**
		 * Initialize.
		 */
		customElements.define( 'jb-toggle-buttons', ToggleButtons );

		/**
		 * ToggleButton Class.
		 */
		class ToggleButton extends HTMLElement {
			/**
			 * Constructor.
			 */
			constructor() {
				super();

				this.button = this.querySelector( 'button' );
				if ( this.button ) {
					this.button.addEventListener( 'click', this.updateParentValue.bind( this ) );
				}
			}

			/**
			 * Update parent value.
			 */
			updateParentValue() {
				// Set parent's value to be this button's value.
				this.parentNode.value = this.getAttribute( 'value' );
			}
		}

		/**
		 * Initialize.
		 */
		customElements.define( 'jb-toggle-button', ToggleButton );
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Web Components</title>
	<style type="text/css">
	jb-toggle-buttons {
	display: flex;
	}
	jb-toggle-button button {
	background-color: gray;
	}
	jb-toggle-button[selected] button {
	background-color: blue;
	}
	</style>
	</head>
	<body>

	<jb-toggle-buttons value="">
	<jb-toggle-button value="button-1"><button>Button 1</button></jb-toggle-button>
	<jb-toggle-button value="button-2"><button>Button 2</button></jb-toggle-button>
	<jb-toggle-button value="button-3"><button>Button 3</button></jb-toggle-button>
	</jb-toggle-buttons>

	<script>
	/**
	* ToggleButtons Class.
	*/
	class ToggleButtons extends HTMLElement {
	/**
	* Constructor.
	*/
	constructor() {
	super();

	this.buttons = this.querySelectorAll( 'jb-toggle-button' );
	}

	/**
	* Observe Attributes.
	*
	* @return {string[]} Attributes to be observed.
	*/
	static get observedAttributes() {
	return [ 'value' ];
	}

	/**
	* Get value.
	*
	* @return {string} Value.
	*/
	get value() {
	return this.getAttribute( 'value' ) ?? '';
	}

	/**
	* Set value.
	*
	* @param {String} value Value.
	*/
	set value( value ) {
	this.setAttribute( 'value', value );
	}

	/**
	* Attribute changed callback.
	*
	* @param {string} name Attribute Name.
	* @param {string} oldValue Attribute's Old Value.
	* @param {string} newValue Attribute's New Value.
	*/
	attributeChangedCallback( name, oldValue, newValue ) {
	if ( ! this.buttons ) {
	return;
	}

	this.buttons.forEach( ( button ) => button.removeAttribute( 'selected' ) );

	if ( '' !== newValue ) {
	this.buttons.forEach( ( button ) => {
	if ( newValue === button.getAttribute( 'value' ) ) {
	button.setAttribute( 'selected', 'selected' );
	}
	} );
	}
	}
	}

	/**
	* Initialize.
	*/
	customElements.define( 'jb-toggle-buttons', ToggleButtons );

	/**
	* ToggleButton Class.
	*/
	class ToggleButton extends HTMLElement {
	/**
	* Constructor.
	*/
	constructor() {
	super();

	this.button = this.querySelector( 'button' );
	if ( this.button ) {
	this.button.addEventListener( 'click', this.updateParentValue.bind( this ) );
	}
	}

	/**
	* Update parent value.
	*/
	updateParentValue() {
	// Set parent's value to be this button's value.
	this.parentNode.value = this.getAttribute( 'value' );
	}
	}

	/**
	* Initialize.
	*/
	customElements.define( 'jb-toggle-button', ToggleButton );
	</script>

	</body>
	</html>