Lexical 0.46.0: Named Slots·Shadow DOM 실험 기능 정리

핵심 요약

Meta(구 Facebook)의 오픈소스 리치 텍스트 프레임워크 Lexical이 2026년 6월 26일 v0.46.0을 릴리스했다. 이번 버전의 헤드라인은 Named Slots(한 호스트/데코레이터 노드 안에 여러 독립 편집 영역)와 Shadow DOM(open shadow root·iframe 호스팅) 실험 지원이다. IME·협업·마크다운 라운드트립·리스트·코드블록 등 수십 건의 수정도 포함됐으며, NPM Trusted Publishing을 처음 적용한 정식 릴리스다.

무슨 일이 있었나

GitHub Release v0.46.0(2026.06.26) 기준 주요 내용:

새 실험 기능

1. Named Slots — 단일 호스트 엘리먼트 또는 decorator node가 자체 editorState 안에서 여러 격리된 편집 영역(slots)을 소유하는 모델. 예: 카드 UI 안에 제목·본문·각주를 각각 독립 Lexical 상태로 관리.

2. Shadow DOM — root element를 open shadow root(또는 iframe)에 호스팅 가능. CSS encapsulation·위젯 임베드·디자인 시스템 충돌 완화에 유리.

Breaking Change (타입)

getParent, getChildren, getFirstChild 등 노드 순회 메서드의 무분별한 제네릭 타입 인자가 deprecated. 암묵적 as 캐스트에 해당해 타입 안전성을 위해 제거·문서화된 non-generic 시그니처로 정리(#8661).

기타 개선

• IME/조합(composition) 이슈 수정
• 협업(collaboration), 마크다운 round-trip
• 리스트, 코드블록, 링크, 모바일 키보드 등

공식 문서:

• Named Slots
• Shadow DOM

개발자 관점 해석

Named Slots가 풀려 주는 것

Notion·Coda·CMS 블록 에디터처럼 '한 페이지에 여러 미니 에디터'가 필요할 때, 예전에는 iframe/multiple Editor 인스턴스로 우회하는 경우가 많았다. Named Slots는 하나의 Lexical 트리 안에서 slot 단위 격리를 선언적으로 표현하려는 시도다. 다만 experimental 단계이므로 API 변경 가능성을 전제해야 한다.

Shadow DOM이 필요한 경우

• 서드파티 위젯·임베드(고객사 페이지에 에디터 삽입)
• Tailwind/global CSS와 에디터 스타일 충돌
• Web Components 생태계와의 통합

Shadow root 호스팅 시 포커스·selection·접근성(a11y) 테스트는 필수다.

타입 breaking change 대응

기존 $getRoot().getFirstChild<ParagraphNode>() 패턴은 컴파일 에러 가능. as ParagraphNode 또는 type guard 함수로 명시적 narrowing 필요.

고유 정리: Lexical 0.46은 '기능 추가'보다 에디터 아키텍처 확장(멀티 영역·캡슐화) 에 베팅한 릴리스다. TipTap/ProseMirror/Slate와 비교할 때, Meta 생태계(Threads·내부 제품)에서 검증된 패턴이 downstream으로 내려오는 신호로 읽을 수 있다. 다만 Named Slots·Shadow DOM은 실험(experimental) 이므로, 프로덕션 도입 전 @lexical/react 예제·Playground·이슈 트래커에서 edge case(협업·undo·copy-paste)를 검증하는 것이 안전하다.

체크포인트와 리스크

• 체크포인트:
• @lexical/* 패키지 버전 일괄 0.46.0 정렬
• TypeScript strict 모드에서 traversal API 마이그레이션
• Named Slots + Collaboration(Yjs) 조합 테스트
• Shadow DOM 내 screen reader·포커스 트랩
• 리스크 요인:
• experimental API 변경
• 플러그인(표, 이미지 등)과 slots 호환성
• SSR(Next.js) + shadow root 하이드레이션 이슈

마무리

Lexical 0.46.0은 복합 블록 에디터·임베드형 위젯을 만드는 팀에게 Named Slots와 Shadow DOM을 검토할 명분을 준다. 당장 업그레이드가 급하지 않다면 breaking type change만이라도 패치 버전 계획에 넣고, 신규 아키텍처는 experimental 플래그 아래 PoC로 시작하는 것을 권한다.

참고 자료

• v0.46.0 - Lexical GitHub Release (2026-06-26)
• Named Slots - Lexical Documentation
• Shadow DOM - Lexical Documentation

---

※ 본 글은 정보 제공을 목적으로 한 개인 의견이며, 특정 라이브러리·프레임워크 사용을 권유하지 않습니다.