ninegrid2 6.1256.0 → 6.1258.0

package/dist/bundle.cjs.js

@@ -121841,24 +121841,26 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
-		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
-		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
-		const useShadow = this.getAttribute("use-shadow") === "true";
-
-		if (useShadow) {
-			this.attachShadow({ mode: 'open' });
-			this.#root = this.shadowRoot;
-		} else {
-			this.#root = this;
-		}
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
+			const useShadow = this.getAttribute("use-shadow") !== "false";
+
+			if (useShadow && !this.shadowRoot) {
+				this.attachShadow({ mode: 'open' });
+				this.#root = this.shadowRoot;
+			} else {
+				this.#root = this;
+			}
+
 			this.#init();
 			this.#isInitialized = true;
 			return true;
@@ -121866,13 +121868,14 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 자식에서 접근 가능한 root getter
+	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
-		return this.#root;
+		return this.#root || this;
 	}
 
-	// root에 따라 엘리먼트 탐색
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
 	}
 
@@ -121915,8 +121918,9 @@ class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -121947,28 +121951,28 @@ class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// 1. CSS Style 적용
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
-		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
-
-		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		// 4. Shadow DOM 사용 시에만 비우고 옮기기
+		/**
+		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
 		if (this.shadowRoot) {
-			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
-			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
+			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
 			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-			this.innerHTML = ""; // Light DOM 비움
+			this.innerHTML = "";
 		}
+		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
+			*/
 	};
 }
 
@@ -122255,36 +122259,27 @@ class nxPanel extends nxDiv {
 customElements.define("nx-panel", nxPanel);
 
 class nxButtons extends nxDiv {
+
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	}
+	};
 
 	#init = () => {
-		// 1. 스타일과 내용을 합친 템플릿 생성
-		const styleContent = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-                ${ninegrid.getCustomPath(this, "nxButtons.css")}
-            </style>
-        `;
-
 		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
 
-		// Shadow DOM일 때는 originContents를 옮겨야 하고,
-		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
-		if (this.shadowRoot) {
-			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
-			this.root.appendChild(htmlTmpl.content.cloneNode(true));
-		} else {
-			// Light DOM 모드일 때: 스타일만 상단에 추가
-			const styleDiv = document.createElement("div");
-			styleDiv.innerHTML = styleContent;
-			this.root.prepend(styleDiv);
-		}
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/bundle.esm.js

@@ -121837,24 +121837,26 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
-		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
-		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
-		const useShadow = this.getAttribute("use-shadow") === "true";
-
-		if (useShadow) {
-			this.attachShadow({ mode: 'open' });
-			this.#root = this.shadowRoot;
-		} else {
-			this.#root = this;
-		}
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
+			const useShadow = this.getAttribute("use-shadow") !== "false";
+
+			if (useShadow && !this.shadowRoot) {
+				this.attachShadow({ mode: 'open' });
+				this.#root = this.shadowRoot;
+			} else {
+				this.#root = this;
+			}
+
 			this.#init();
 			this.#isInitialized = true;
 			return true;
@@ -121862,13 +121864,14 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 자식에서 접근 가능한 root getter
+	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
-		return this.#root;
+		return this.#root || this;
 	}
 
-	// root에 따라 엘리먼트 탐색
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
 	}
 
@@ -121911,8 +121914,9 @@ class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -121943,28 +121947,28 @@ class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// 1. CSS Style 적용
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
-		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
-
-		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		// 4. Shadow DOM 사용 시에만 비우고 옮기기
+		/**
+		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
 		if (this.shadowRoot) {
-			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
-			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
+			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
 			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-			this.innerHTML = ""; // Light DOM 비움
+			this.innerHTML = "";
 		}
+		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
+			*/
 	};
 }
 
@@ -122251,36 +122255,27 @@ class nxPanel extends nxDiv {
 customElements.define("nx-panel", nxPanel);
 
 class nxButtons extends nxDiv {
+
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	}
+	};
 
 	#init = () => {
-		// 1. 스타일과 내용을 합친 템플릿 생성
-		const styleContent = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-                ${ninegrid.getCustomPath(this, "nxButtons.css")}
-            </style>
-        `;
-
 		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
 
-		// Shadow DOM일 때는 originContents를 옮겨야 하고,
-		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
-		if (this.shadowRoot) {
-			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
-			this.root.appendChild(htmlTmpl.content.cloneNode(true));
-		} else {
-			// Light DOM 모드일 때: 스타일만 상단에 추가
-			const styleDiv = document.createElement("div");
-			styleDiv.innerHTML = styleContent;
-			this.root.prepend(styleDiv);
-		}
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/_nxDiv.js

@@ -3,24 +3,26 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
-		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
-		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
-		const useShadow = this.getAttribute("use-shadow") === "true";
-
-		if (useShadow) {
-			this.attachShadow({ mode: 'open' });
-			this.#root = this.shadowRoot;
-		} else {
-			this.#root = this;
-		}
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
+			const useShadow = this.getAttribute("use-shadow") !== "false";
+
+			if (useShadow && !this.shadowRoot) {
+				this.attachShadow({ mode: 'open' });
+				this.#root = this.shadowRoot;
+			} else {
+				this.#root = this;
+			}
+
 			this.#init();
 			this.#isInitialized = true;
 			return true;
@@ -28,13 +30,14 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 자식에서 접근 가능한 root getter
+	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
-		return this.#root;
+		return this.#root || this;
 	}
 
-	// root에 따라 엘리먼트 탐색
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
 	}
 
@@ -77,8 +80,9 @@ export class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -109,27 +113,27 @@ export class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// 1. CSS Style 적용
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
-		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
-
-		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		// 4. Shadow DOM 사용 시에만 비우고 옮기기
+		/**
+		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
 		if (this.shadowRoot) {
-			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
-			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
+			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
 			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-			this.innerHTML = ""; // Light DOM 비움
+			this.innerHTML = "";
 		}
+		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
+			*/
 	};
 }

package/dist/nx/_nxDiv2.js

@@ -7,9 +7,9 @@ export class nxDiv2 extends HTMLElement
 
 	constructor () {
 		super();
-		//this.attachShadow({ mode: 'open' });
+		this.attachShadow({ mode: 'open' });
 	}
-	
+
 	connectedCallback() {
 		if (!this.#isInitialized) {
 			this.#init();
@@ -24,7 +24,7 @@ export class nxDiv2 extends HTMLElement
 		const jsonData = {};
 
 		// Shadow DOM 내의 폼 요소만 선택
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).forEach(el => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key) return; // name이 없는 요소는 건너뜁니다.
 
@@ -50,8 +50,7 @@ export class nxDiv2 extends HTMLElement
 	};
 
 	setData = (jsonData) => {
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).forEach(el => {
-			console.log("------", el);
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			el.removeEventListener("input", this.#changeHandler);
 			el.addEventListener("input", this.#changeHandler);
 		});
@@ -62,7 +61,7 @@ export class nxDiv2 extends HTMLElement
 		}
 
 		let bChanged = false;
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this).forEach(el => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 

package/dist/nx/nxButtons.js

@@ -1,38 +1,29 @@
 import ninegrid from "../index.js";
-import { nxDiv } from "./_nxDiv.js";
+import {nxDiv} from "./_nxDiv.js";
 
 class nxButtons extends nxDiv {
+
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	}
+	};
 
 	#init = () => {
-		// 1. 스타일과 내용을 합친 템플릿 생성
-		const styleContent = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-                ${ninegrid.getCustomPath(this, "nxButtons.css")}
-            </style>
-        `;
-
 		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
 
-		// Shadow DOM일 때는 originContents를 옮겨야 하고,
-		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
-		if (this.shadowRoot) {
-			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
-			this.root.appendChild(htmlTmpl.content.cloneNode(true));
-		} else {
-			// Light DOM 모드일 때: 스타일만 상단에 추가
-			const styleDiv = document.createElement("div");
-			styleDiv.innerHTML = styleContent;
-			this.root.prepend(styleDiv);
-		}
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
-customElements.define("nx-buttons", nxButtons);
+customElements.define("nx-buttons", nxButtons);

package/dist/nx/nxButtons2.js

@@ -0,0 +1,29 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv2.js";
+
+class nxButtons extends nxDiv2 {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1256.0",
+  "version": "6.1258.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/_nxDiv.js

@@ -3,24 +3,26 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root; // 탐색 및 렌더링 대상 (shadowRoot 또는 this)
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
-		// 1. 옵션 확인 (기본값은 shadow 사용하지 않는 기존 방식처럼 동작 가능하게 설정)
-		// 만약 기존 소스 그대로 shadow를 쓰고 싶다면 true로, 아니면 속성 체크
-		const useShadow = this.getAttribute("use-shadow") === "true";
-
-		if (useShadow) {
-			this.attachShadow({ mode: 'open' });
-			this.#root = this.shadowRoot;
-		} else {
-			this.#root = this;
-		}
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
+			const useShadow = this.getAttribute("use-shadow") !== "false";
+
+			if (useShadow && !this.shadowRoot) {
+				this.attachShadow({ mode: 'open' });
+				this.#root = this.shadowRoot;
+			} else {
+				this.#root = this;
+			}
+
 			this.#init();
 			this.#isInitialized = true;
 			return true;
@@ -28,13 +30,14 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
-	// 자식에서 접근 가능한 root getter
+	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
-		return this.#root;
+		return this.#root || this;
 	}
 
-	// root에 따라 엘리먼트 탐색
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
 	}
 
@@ -77,8 +80,9 @@ export class nxDiv extends HTMLElement {
 			const value = jsonData[key];
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
@@ -109,27 +113,27 @@ export class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// 1. CSS Style 적용
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. 중요: 이미 데이터가 옮겨졌거나 초기화 중복 실행 방지
-		if (this.shadowRoot && this.shadowRoot.innerHTML !== "") return;
-
-		// 3. 내부 HTML 보관
 		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
 
-		// 4. Shadow DOM 사용 시에만 비우고 옮기기
+		/**
+		// 2. Shadow DOM을 사용할 때만 내용을 안으로 옮기고 밖을 비웁니다.
 		if (this.shadowRoot) {
-			// 자식 클래스(nxButtons 등)에서 내용을 직접 구성할 수 있도록
-			// 태그 종류에 따라 선별적으로 내용을 넣어줌
+			// 상속받은 자식 클래스(nxButtons 등)가 직접 렌더링하는 경우를 위해
+			// nx-div 태그일 때만 자동으로 내용을 옮겨줍니다.
 			if (this.tagName.toLowerCase() === 'nx-div') {
 				this.shadowRoot.innerHTML = this.originContents;
 			}
-			this.innerHTML = ""; // Light DOM 비움
+			this.innerHTML = "";
 		}
+		// Shadow DOM을 안 쓰면 Light DOM 상태이므로 innerHTML을 유지합니다.
+			*/
 	};
 }

package/src/nx/nxButtons.js

@@ -1,38 +1,29 @@
 import ninegrid from "../index.js";
-import { nxDiv } from "./_nxDiv.js";
+import {nxDiv} from "./_nxDiv.js";
 
 class nxButtons extends nxDiv {
+
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	}
+	};
 
 	#init = () => {
-		// 1. 스타일과 내용을 합친 템플릿 생성
-		const styleContent = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-                ${ninegrid.getCustomPath(this, "nxButtons.css")}
-            </style>
-        `;
-
 		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
 
-		// Shadow DOM일 때는 originContents를 옮겨야 하고,
-		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
-		if (this.shadowRoot) {
-			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
-			this.root.appendChild(htmlTmpl.content.cloneNode(true));
-		} else {
-			// Light DOM 모드일 때: 스타일만 상단에 추가
-			const styleDiv = document.createElement("div");
-			styleDiv.innerHTML = styleContent;
-			this.root.prepend(styleDiv);
-		}
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
-customElements.define("nx-buttons", nxButtons);
+customElements.define("nx-buttons", nxButtons);