ninegrid2 6.984.0 → 6.985.0

package/dist/bundle.cjs.js

@@ -121916,53 +121916,47 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
-		const children = Array.from(this.children);
-		if (children.length === 0) return;
-
-		console.log("333");
-		// Shadow Root의 모든 자식 노드 제거
-		while (this.shadowRoot.firstChild) {
-			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-		}
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		const mainGrid = document.createElement('div');
-		mainGrid.style.display = 'grid';
-		mainGrid.style.width = '100%';
-		mainGrid.style.height = '100%';
-		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111");
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			mainGrid.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				mainGrid.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-splitter>`;
 			}
 		}
 
-		this.shadowRoot.appendChild(mainGrid);
+		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
+		this.shadowRoot.innerHTML = template;
+
+		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
+		const children = Array.from(this.children);
+		for (let i = 0; i < children.length; i++) {
+			children[i].slot = `slot-${i}`;
+		}
 	}
 }
 

package/dist/bundle.esm.js

@@ -121912,53 +121912,47 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
-		const children = Array.from(this.children);
-		if (children.length === 0) return;
-
-		console.log("333");
-		// Shadow Root의 모든 자식 노드 제거
-		while (this.shadowRoot.firstChild) {
-			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-		}
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		const mainGrid = document.createElement('div');
-		mainGrid.style.display = 'grid';
-		mainGrid.style.width = '100%';
-		mainGrid.style.height = '100%';
-		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111");
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			mainGrid.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				mainGrid.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-splitter>`;
 			}
 		}
 
-		this.shadowRoot.appendChild(mainGrid);
+		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
+		this.shadowRoot.innerHTML = template;
+
+		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
+		const children = Array.from(this.children);
+		for (let i = 0; i < children.length; i++) {
+			children[i].slot = `slot-${i}`;
+		}
 	}
 }
 

package/dist/nx/nxLayout.js

@@ -21,53 +21,47 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
-		const children = Array.from(this.children);
-		if (children.length === 0) return;
-
-		console.log("333")
-		// Shadow Root의 모든 자식 노드 제거
-		while (this.shadowRoot.firstChild) {
-			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-		}
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		const mainGrid = document.createElement('div');
-		mainGrid.style.display = 'grid';
-		mainGrid.style.width = '100%';
-		mainGrid.style.height = '100%';
-		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111")
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			mainGrid.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				mainGrid.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-splitter>`;
 			}
 		}
 
-		this.shadowRoot.appendChild(mainGrid);
+		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
+		this.shadowRoot.innerHTML = template;
+
+		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
+		const children = Array.from(this.children);
+		for (let i = 0; i < children.length; i++) {
+			children[i].slot = `slot-${i}`;
+		}
 	}
 }
 

package/package.json

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

package/src/nx/nxLayout.js

@@ -21,53 +21,47 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 컴포넌트의 자식 요소는 Shadow DOM의 렌더링 대상이 아님
-		const children = Array.from(this.children);
-		if (children.length === 0) return;
-
-		console.log("333")
-		// Shadow Root의 모든 자식 노드 제거
-		while (this.shadowRoot.firstChild) {
-			this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-		}
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		const mainGrid = document.createElement('div');
-		mainGrid.style.display = 'grid';
-		mainGrid.style.width = '100%';
-		mainGrid.style.height = '100%';
-		mainGrid.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
+		console.log("111")
 
-		let childIndex = 0;
+		// 템플릿 스트링을 사용하여 섀도우 돔 내부 구조를 동적으로 생성
+		let template = `<style>:host { display: grid; width: 100%; height: 100%; }</style>`;
+		let slotIndex = 0;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-			rowWrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-			rowWrapper.style.gap = `8px`; // 가로 스플리터 간격
-			rowWrapper.style.height = '100%';
+			let rowTemplate = '';
 
 			for (let col = 0; col < numColumns; col++) {
-				if (children[childIndex]) {
-					// 원본 자식 요소를 Shadow DOM 내부의 div에 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
-					childIndex++;
+				// <slot>에 이름을 부여하여 특정 요소를 투영
+				rowTemplate += `<div><slot name="slot-${slotIndex}"></slot></div>`;
+				slotIndex++;
+				if (col < numColumns - 1) {
+					rowTemplate += `<nx-splitter direction="horizontal"></nx-splitter>`;
 				}
 			}
 
-			mainGrid.appendChild(rowWrapper);
+			template += `
+             <div style="display: grid; grid-template-columns: repeat(${numColumns}, 1fr) repeat(${numColumns-1}, 8px); height: 100%;">
+                 ${rowTemplate}
+             </div>
+           `;
 
 			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				mainGrid.appendChild(splitter);
+				template += `<nx-splitter direction="vertical"></nx-splitter>`;
 			}
 		}
 
-		this.shadowRoot.appendChild(mainGrid);
+		// 섀도우 돔에 동적으로 생성된 HTML을 삽입
+		this.shadowRoot.innerHTML = template;
+
+		// 사용자가 제공한 원본 자식 요소를 <slot>에 할당
+		const children = Array.from(this.children);
+		for (let i = 0; i < children.length; i++) {
+			children[i].slot = `slot-${i}`;
+		}
 	}
 }