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.
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:
If you have technical questions, please create a support ticket in the DevExpress Support Center.