Hi,
Is it possible to define where the dropdown container (i.e. k-list-container) is appended in the DOM?
By default it is appended at the bottom of the body but I'd like to define where it is appended.
The reason why I need to do this is because I'm using the KendoReact components in a WebComponent (custom element) which is hosted in a shadow-dom for isolation.
The styles are also only loaded within the shadow-dom and are therfore not applied to content on the outside.
The issue is that the kendo dropdown container is appended outside of the shadow-dom and the scope of the kendo styles.
The dropdownlist component is styled correctly but the dropdown part that is appended to body is not styled.
I've solved this with other components (i.e. modal window) by defining where I want the the container appended with the createPortal method in React.
: document.body
)
Hi all,
I have exact same issue and this prevents our company to choose Kendo React library as a base for our next big project. We going to use webcomponents + react.
I've also find that WebComponentIcons font characters are not diplayed properly inside shadow dom.
@Stefan, Can you assist?
When I connect all.css styles for whole html page all works fine but if I do same behind shadow-root element then all icons look broken:
