🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all the hot features!
Get Free Trial

Flexmonster within Shadow DOM

Prajyot Rumde asked on November 18, 2019

Hello Flexmonster Team,
We are using Flexmonster inside Shadow DOM, recently we identified an issue with click event is not being triggered from fm-ui-dropdown element.
Any suggestion for it?

4 answers

Vera Didenko Vera Didenko Flexmonster November 18, 2019

Thank you for reaching out to us.
To understand the situation better, our team kindly asks you to provide more details on your case:
1) Please explain more about how you are using Flexmonster inside Shadow DOM
2) Please provide more information regarding the issue with the click event: which dropdown element fails to work?
In addition, any screenshots, illustrations, code examples are greatly appreciated.
Waiting for your reply.
Best Regards,

Prajyot Rumde November 19, 2019

Hello Flexmonster Team,

Thanks for reply.

Here providing details on query raised in previous post –
We are using Flexmonster in our Angular application and that has been integrated using Angular module : ng-flexmonster
In angular component where flexmonster directive is used that component is being added to Shadow DOM, so that Flexmonster CSS encapsulated with that particular component only and should not disturb any other UI elements

For this encapsulation used as ViewEncapsulation.Native as below :

  selector: 'fm-component',
  template: `
    <fm-pivot [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'" [report]="'https://cdn.flexmonster.com/reports/report.json'"></fm-pivot>
  encapsulation: ViewEncapsulation.Native
class FmComponent {

Attached images where issue is occurring while click on drop down – UI and DOM snippet  

Hope this much details would be sufficient for query resolution.

Vera Didenko Vera Didenko Flexmonster November 20, 2019

Thank you for providing further details regarding your case.
It helped a lot to understand the situation better.
We have managed to reproduce the issue.
Our team will provide the fix for this in the minor release version with the ETA 16th of December.
Please let us know if you have any questions.
Best Regards,

Illia Yatsyshyn Illia Yatsyshyn Flexmonster December 17, 2019

We are glad to inform you that several UI issues when using Flexmonster inside Shadow DOM were fixed.
This is available in the 2.7.21 version of Flexmonster: https://www.flexmonster.com/release-notes/
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/
Please let us know if everything works.
Best Regards,

Please login or Register to Submit Answer