Shadow DOM

3.3.0 버전부터 지원합니다.

다이얼로그, 풍선팝업, 툴팁이 에디터 외부 컨테이너에서 관리될 때, Shadow DOM은 외부 CSS로부터 이들을 격리하고 독립적인 스타일 환경을 제공합니다.

사용 시기

호스트 페이지의 CSS가 에디터 다이얼로그, 팝업 또는 툴팁과 충돌할 때 Shadow DOM을 활성화합니다. 이는 글로벌 스타일시트가 광범위한 선택자나 !important 규칙을 사용하여 의도치 않게 에디터 UI 스타일을 덮어쓰는 CMS 또는 포털 환경에서 흔히 발생합니다.

구성

구성 키

키타입기본값설명
editor.external.container.enableShadowDOM.enablebooleanfalse외부 UI 요소에 대해 Shadow DOM 격리를 활성화합니다
editor.external.container.enableShadowDOM.style.urlsstring[][]Shadow DOM에 주입할 CSS 파일

다이얼로그/풍선팝업/툴팁에 필요한 모든 CSS 파일을 style.urls 아래에 나열합니다. 이들은 Shadow DOM에 로드되며, 호스트 페이지의 CSS와는 독립적으로 적용됩니다.

참고: Shadow DOM은 상위 페이지로부터의 CSS 상속을 완전히 차단합니다. 에디터 UI 렌더링에 필요한 모든 스타일시트 — 기본 에디터 CSS, 테마 파일, 그리고 모든 플러그인 CSS — 는 반드시 style.urls에 명시적으로 나열되어야 합니다.

키타입설명
enablebooleanShadow DOM 모드 활성화
style.urlsstring[]Shadow DOM 내부에 주입할 스타일시트 URL들
// synapeditor.config.js
'editor.external.container.enableShadowDOM': {
  enable: true,
  'style.urls': [
    'url of synapeditor.min.css',
    'url of externalStyle.css',
    'url of plugins/webAccessibilityChecker/webAccessibilityChecker.min.css',
    'url of plugins/shapeEditor/shapeEditor.min.css',
    'url of plugins/webSpellChecker/webSpellChecker.min.css',
    'url of plugins/personalDataProtection/personalDataProtection.min.css',
    'url of plugins/characterPicker/characterPicker.min.css',
    'url of plugins/documentComparison/documentComparison.min.css',
    'url of plugins/formEditor/formEditor.min.css',
    'url of plugins/forbiddenWordDetection/forbiddenWordDetection.min.css',
    'url of plugins/ocr/ocr.min.css',
    'url of themes/dark-gray.css'
  ]
}

예시

다음과 같은 페이지 수준 CSS 규칙이 있을 때, 외부 컨테이너는 Shadow DOM이 비활성화된 경우에만 영향을 받습니다:

.se-external-container {
  background-color: #ff6b6b !important;
  color: white !important;
  border: 3px solid #4ecdc4 !important;
}

Shadow DOM이 활성화되면, 외부 컨테이너의 스타일은 격리되어 영향을 받지 않습니다.

비교

활성화됨비활성화됨
EnabledDisabled