ShadowDom ViewEncapsulation Mode

Environment

Product

Progress® Kendo UI® for Angular

Description

When I set the ViewEncapsulation to ShadowDom, the Kendo UI for Angular components functionality breaks. Does Kendo UI for Angular support Shadow DOM?

Cause

The Shadow DOM view encapsulation mode is not officially supported by the Kendo UI for Angular components. The Shadow DOM creates a sub-tree with it's own document-like object (ShadowRoot) which causes issues when the document object is used in the component code. Furthermore, the Kendo UI Theme loaded on the main page does not apply to elements on the Shadow DOM.

Solution

Most of our components rely on being hosted in the Light DOM (main document) for at least some part of their implementation. Even if they appear to function normally, the components are not be fully functional in a Shadow DOM.

We recommend using the ViewEncapsulation.Emulated mode when using Kendo UI for Angular components.