Get Free Trial
Get Free Trial

Flexmonster within Shadow DOM

Answered
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?
 

3 answers

Public
Vera Didenko Flexmonster November 18, 2019

Hello, 
 
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,
Vera

Public
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 :

@Component({
  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.

Public
Vera Didenko Flexmonster November 20, 2019

Hello, 
 
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,
Vera

Please login or Register to Submit Answer