ninegrid2 6.1250.0 → 6.1251.0

package/dist/bundle.cjs.js

@@ -121948,22 +121948,33 @@ class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// CSS Style 적용
+		// 1. CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. HTML 내용 처리
+		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
+		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
+			return; // 이미 내용이 있으면 중복 실행 방지
+		}
+
+		// 3. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
 
-		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
 		if (this.shadowRoot) {
-			this.shadowRoot.innerHTML = this.originContents;
-			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+			// Shadow DOM 모드일 때
+			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
+			// 기본 뼈대만 잡아야 합니다.
+			if (this.shadowRoot.innerHTML === "") {
+				this.shadowRoot.innerHTML = this.originContents;
+			}
+
+			// 중요: React가 다시 자식을 채우지 않도록 비우되,
+			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
+			this.innerHTML = "";
 		}
-		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }
 
@@ -122266,7 +122277,7 @@ class nxButtons extends nxDiv {
                 ${ninegrid.getCustomPath(this, "nxButtons.css")}
             </style>
         `;
-console.log("11111");
+
 		const htmlTmpl = document.createElement("template");
 
 		// Shadow DOM일 때는 originContents를 옮겨야 하고,

package/dist/bundle.esm.js

@@ -121944,22 +121944,33 @@ class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// CSS Style 적용
+		// 1. CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. HTML 내용 처리
+		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
+		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
+			return; // 이미 내용이 있으면 중복 실행 방지
+		}
+
+		// 3. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
 
-		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
 		if (this.shadowRoot) {
-			this.shadowRoot.innerHTML = this.originContents;
-			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+			// Shadow DOM 모드일 때
+			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
+			// 기본 뼈대만 잡아야 합니다.
+			if (this.shadowRoot.innerHTML === "") {
+				this.shadowRoot.innerHTML = this.originContents;
+			}
+
+			// 중요: React가 다시 자식을 채우지 않도록 비우되,
+			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
+			this.innerHTML = "";
 		}
-		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }
 
@@ -122262,7 +122273,7 @@ class nxButtons extends nxDiv {
                 ${ninegrid.getCustomPath(this, "nxButtons.css")}
             </style>
         `;
-console.log("11111");
+
 		const htmlTmpl = document.createElement("template");
 
 		// Shadow DOM일 때는 originContents를 옮겨야 하고,

package/dist/nx/_nxDiv.js

@@ -110,21 +110,32 @@ export class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// CSS Style 적용
+		// 1. CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. HTML 내용 처리
+		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
+		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
+			return; // 이미 내용이 있으면 중복 실행 방지
+		}
+
+		// 3. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
 
-		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
 		if (this.shadowRoot) {
-			this.shadowRoot.innerHTML = this.originContents;
-			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+			// Shadow DOM 모드일 때
+			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
+			// 기본 뼈대만 잡아야 합니다.
+			if (this.shadowRoot.innerHTML === "") {
+				this.shadowRoot.innerHTML = this.originContents;
+			}
+
+			// 중요: React가 다시 자식을 채우지 않도록 비우되,
+			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
+			this.innerHTML = "";
 		}
-		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }

package/dist/nx/nxButtons.js

@@ -18,7 +18,7 @@ class nxButtons extends nxDiv {
                 ${ninegrid.getCustomPath(this, "nxButtons.css")}
             </style>
         `;
-console.log("11111")
+
 		const htmlTmpl = document.createElement("template");
 
 		// Shadow DOM일 때는 originContents를 옮겨야 하고,

package/package.json

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

package/src/nx/_nxDiv.js

@@ -110,21 +110,32 @@ export class nxDiv extends HTMLElement {
 	}
 
 	#init = () => {
-		// CSS Style 적용
+		// 1. CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
-		// 2. HTML 내용 처리
+		// 2. 이미 초기화가 완료되었거나 내용이 옮겨졌는지 확인
+		if (this.shadowRoot && this.shadowRoot.innerHTML.trim() !== "") {
+			return; // 이미 내용이 있으면 중복 실행 방지
+		}
+
+		// 3. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
 
-		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
 		if (this.shadowRoot) {
-			this.shadowRoot.innerHTML = this.originContents;
-			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+			// Shadow DOM 모드일 때
+			// 만약 자식 클래스에서 별도 템플릿을 그린다면 여기서는 비워두거나
+			// 기본 뼈대만 잡아야 합니다.
+			if (this.shadowRoot.innerHTML === "") {
+				this.shadowRoot.innerHTML = this.originContents;
+			}
+
+			// 중요: React가 다시 자식을 채우지 않도록 비우되,
+			// 하위 클래스에서 처리할 수 있도록 보존만 합니다.
+			this.innerHTML = "";
 		}
-		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }

package/src/nx/nxButtons.js

@@ -18,7 +18,7 @@ class nxButtons extends nxDiv {
                 ${ninegrid.getCustomPath(this, "nxButtons.css")}
             </style>
         `;
-console.log("11111")
+
 		const htmlTmpl = document.createElement("template");
 
 		// Shadow DOM일 때는 originContents를 옮겨야 하고,