DevExtreme Vue - Shadow DOM

The Shadow DOM is one of the three Web Component specifications, alongside HTML templates and Custom Elements. It simplifies the creation of components with isolated CSS and JavaScript. It is also commonly used in modern web interfaces and is supported by all major browsers.

Benefits

The Shadow DOM offers the following benefits for web development:

  • Encapsulation
    The Shadow DOM isolates a component's styles and scripts. This isolation prevents conflicts between the component and other styles and scripts on the page.

  • Reusability
    Encapsulation makes Shadow DOM components self-contained, and you can use them across various parts of an application or even different applications.

  • Subtree Independence
    The Shadow DOM creates isolated environments for components. This functionality allows independent development, testing, and implementation, which improves maintainability of large applications.

  • Performance Improvement
    The Shadow DOM encapsulates styles and code. As a result, it allows browsers to update only specific page parts and enhances performance.

Support

NOTE
This functionality is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please create a new ticket in the DevExpress Support Center.

DevExtreme components currently only partly support the Shadow DOM. The following limitations apply:

  • Diagram and Gantt do not support the Shadow DOM.

  • CSS selectors in properties like target or container are not supported. Pass a DOM element instead.

  • Popup, Tooltip, Popover, Toast, and LoadPanel render the dialog window in the <body> element, not in the Shadow DOM.

  • DevExtreme stylesheets must be included in the Light DOM. Otherwise, Shadow DOM components may render incorrectly.

  • If DevExtreme stylesheets lie in the same domain as index.html, the styles will be injected into the Shadow DOM. Otherwise, you need to state them explicitly in the Shadow DOM.

For an example on how to correctly set up DevExtreme components in the Shadow DOM, refer to the following GitHub repository:

View on GitHub