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

Shadow DOM

Shadow DOM

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

二者択一機能をShadow DOMで封じ込め

NO,YES,0
却下!,採用します,1
記述コード:
選択肢1,選択肢2,初期値 を挟みます。

<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);
				}
			}
		);
	})();
})();
2024年6月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。