Shadow DOM으로 FOUC 문제 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상**: 웹 개발자, 프론트엔드 개발자
• *난이도**: 중급 (Shadow DOM, Custom Elements, 라이프사이클 콜백 이해 필요)

핵심 요약

• FOUC(Flash of Unstyled Content) 방지: :not(:defined) 선택자로 미등록 요소 숨기기
• 라이프사이클 콜백 활용: connectedCallback으로 DOM 파싱 전 초기화 수행
• Declarative Shadow DOM 사용: HTTP 요청 없이 템플릿 자동 적용 가능

섹션별 세부 요약

1. FOUC 문제 이해 및 해결

• FOUC는 스크립트가 DOM 파싱 완료 후 실행되어 스타일이 적용되기 전에 요소가 렌더링되는 현상
• :not(:defined) CSS 규칙으로 미등록 요소 숨김 (예: copy-text:not(:defined) { display: none; })
• connectedCallback을 사용해 DOM 파싱 전 초기화 로직 실행

2. 라이프사이클 콜백 구현

• connectedCallback 메서드로 요소가 DOM에 삽입될 때 실행되도록 설정
• #initialized 플래그로 초기화 중복 방지
• 예:

connectedCallback() {
  if (this.#initialized) return;
  this.#configure();
  this.#initialized = true;
}

3. Declarative Shadow DOM 적용

• 과

4. 스타일 공유 기법

• 외부 CSS 파일 사용 (HTTP 요청 필요)
• CSSStyleSheet 인스턴스 생성 후 Shadow DOM에 적용
• 예:

const css = new CSSStyleSheet();
css.replaceSync(sharedStyles.textContent);
this.#shadow.adoptedStyleSheets = [css];

결론

• FOUC 방지: :not(:defined) 선택자 사용, connectedCallback으로 초기화 로직 실행
• 성능 최적화: Declarative Shadow DOM 사용 (HTTP 요청 없음), above-the-fold 요소 우선 로딩
• 스타일 공유: CSSStyleSheet를 통해 Shadow DOM에 외부 스타일 적용 가능 (HTTP 요청 필요 시 유의)