Shadow DOM

Release 3.3.0+

When dialogs, balloons, and tooltips are managed outside the editor (in an external container), Shadow DOM isolates them from external CSS and gives them an independent style environment.

When to Use

Enable Shadow DOM when the host page's CSS conflicts with editor dialogs, popups, or tooltips. This is common in CMS or portal environments where global stylesheets use broad selectors or !important rules that unintentionally override editor UI styles.

Configuration

Configuration Keys

List all CSS files that the dialogs/balloons/tooltips need under style.urls. They are loaded into the Shadow DOM and applied in isolation from the host page's CSS.

Note: Shadow DOM blocks CSS inheritance from the parent page entirely. Every stylesheet required for editor UI rendering — including the base editor CSS, theme files, and any plugin CSS — must be explicitly listed in style.urls.

// 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'
  ]
}

Example

When a page-level CSS rule like the following is present, the external container is affected only if Shadow DOM is disabled:

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

With Shadow DOM enabled, the external container's styles are isolated and unaffected.

Comparison