Monkeykim's blog

Shadow DOM이란?Shadow DOM은 웹 컴포넌트의 핵심 기술 중 하나로, 컴포넌트 내부의 DOM 구조와 스타일을 외부로부터 캡슐화하는 기술입니다.주요 특징스타일 격리컴포넌트 내부의 스타일이 외부 스타일에 영향을 받지 않으며, 반대로 외부 스타일도 컴포넌트 내부에 영향을 미치지 않습니다.구조 보호컴포넌트 내부 구조가 외부로부터 숨겨져 변경이나 접근이 어렵습니다.Shadow DOM의 실제 활용일반 HTML 요소와 Shadow DOM 기반 컴포넌트의 차이를 이해하기 위해, 아래 예제를 보겠습니다.버튼버튼위 코드에서 .button 클래스를 스타일링하면 첫 번째 요소에는 적용되지만, ion-button은 Shadow DOM 내부에 캡슐화되어 있어 스타일이 적용되지 않습니다.Ionic에서 Shadow D..

1. 문제 상황Ionic과 Angular를 활용한 프로젝트에서, Sidebar와 Popover를 함께 구현했을 때 Popover가 Sidebar 뒤에 렌더링되는 문제가 발생했습니다. 문제는 Popover가 제대로 동작하지 않으며, 클릭 또한 불가능하다는 것이었습니다.이 문제는 특히 ion-popover와 ion-app의 구조 및 동작 방식에 대한 이해가 부족하면 쉽게 놓칠 수 있는 부분입니다.2. 문제 원인Sidebar 디렉티브가 Angular의 동적 DOM 조작을 통해 body에 직접 추가되었고, 이로 인해 Ionic의 ion-app 컨텍스트 외부에 위치하게 되었습니다. 하지만, Ionic의 ion-popover는 기본적으로 ion-app 내부에서 동작하도록 설계되어 있습니다.이로 인해 다음과 같은 문..