DevExtreme Angular - Shadow DOM

Shadow DOM allows you to attach a DOM subtree to an element and have the internals of this tree hidden from JavaScript and CSS running in the page.

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 Shadow DOM. The following limitations apply:

  • Diagram and Gantt do not support 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 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 Shadow DOM, refer to the following GitHub repository:

View on GitHub