Custom element, Shadow DOM で作るトグルセレクト

<ce-toggleselect>NO,YES,0</ce-toggleselect>
<ce-toggleselect>却下!,採用します,1</ce-toggleselect>

<script defer src="./js/ce_toggleselect.js"></script>
		

/**
 * トグルセレクト
 *
 * '<ce-toggleselect>NO,YES,0</ce-toggleselect>'	//選択肢1,選択肢2,初期値
 *
 * @author ao-system, Inc.
 * @date 2024-06-15
 */
(() => {
	'use strict';
	class ToggleSelect {
		#style = `
			:host > div {
				--color-base: #fff;
				--color-off: #777;
				--color-on: #fff;
				--color-checked: #17d;
				--transition-time: 200ms;
				user-select: none;
				width: 200px;
				padding: 3px;
				background-color: var(--color-base);
				border-radius: 50px;
				display: grid;
				&[checked] {
					> div:nth-of-type(1) {
						margin-left: 50%;
					}
					> div:nth-of-type(2) {
						> label {
							&:nth-of-type(1) {
								color: var(--color-off);
							}
							&:nth-of-type(2) {
								color: var(--color-on);
							}
						}
					}
				}
				> div {
					grid-area: 1/1/2/2;
					&:nth-of-type(1) {
						border-radius: 50px;
						background-color: var(--color-checked);
						width: 50%;
						transition: margin var(--transition-time);
					}
					&:nth-of-type(2) {
						display: grid;
						grid-template-columns: 1fr 1fr;
						> label {
							cursor: pointer;
							font-size: 15px;
							line-height: 1;
							font-weight: 600;
							padding: 12px;
							text-align: center;
							&:nth-of-type(1) {
								color: var(--color-on);
								transition: color var(--transition-time);
							}
							&:nth-of-type(2) {
								color: var(--color-off);
								transition: color var(--transition-time);
							}
						}
					}
				}
			}
		`;
		constructor() {
		}
		render(elm) {
			const styleElm = document.createElement('style');
			styleElm.innerHTML = this.#style;
			//
			const ary = elm.innerText.split(',');
			const text0 = ary[0];
			const text1 = ary[1];
			const initial = ary[2];
			//
			const divElm = document.createElement('div');
			const div1 = document.createElement('div');
			divElm.appendChild(div1);
			const div2 = document.createElement('div');
			const label1 = document.createElement('label');
			label1.textContent = text0;
			label1.addEventListener('click',() => {
				divElm.removeAttribute('checked');
			});
			div2.appendChild(label1);
			const label2 = document.createElement('label');
			label2.textContent = text1;
			label2.addEventListener('click',() => {
				divElm.setAttribute('checked','checked');
			});
			div2.appendChild(label2);
			divElm.appendChild(div2);
			if (initial == 1) {
				divElm.setAttribute('checked','checked');
			}
			//
			const shadowRoot = elm.attachShadow({mode:'closed'});
			shadowRoot.appendChild(styleElm);
			shadowRoot.appendChild(divElm);
		}
	}
	(() => {
		const toggleSelect = new ToggleSelect();
		customElements.define('ce-toggleselect',
			class extends HTMLElement {
				constructor() {
					super();
					toggleSelect.render(this);
				}
			}
		);
	})();
})();