primeng
primeng copied to clipboard
components errors with ViewEncapsulation.ShadowDom
Describe the bug
Hi,
Some primeNg components produce an error when embedded in an Angular ShadowDom encapsulation.
ERROR TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element.
This issue has already been reported, but it still persists: https://github.com/primefaces/primeng/issues/9471
Environment
Angular app with primeNg:
Reproducer
https://stackblitz.com/edit/8k8tot?file=src%2Fapp%2Fdemo%2Fcalendar-basic-demo.ts
Angular version
17.3.0
PrimeNG version
17.13.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.9.0
Browser(s)
No response
Steps to reproduce the behavior
Demo with the 'p-calendar'
Open the example project: https://stackblitz.com/edit/8k8tot?file=src%2Fapp%2Fdemo%2Fcalendar-basic-demo.ts
Open the browser console
Select a date on the demo calendar
=> an error is logged int the browser console
ERROR TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element.
Expected behavior
No errors should be logged in the console
I have the same problem with other components.
InputMask don't work at all when using Shadow Dom
https://stackblitz.com/edit/a6k78r?file=src%2Fapp%2Fdemo%2Finput-mask-basic-demo.ts
vendor.js:60118 ERROR TypeError: Cannot read properties of undefined (reading 'end') at InputMask.onKeyPress (vendor.js:153522:15) at InputMask_Template_input_keypress_0_listener (vendor.js:153775:80) at executeListenerWithErrorHandling (vendor.js:78661:12) at wrapListenerIn_markDirtyAndPreventDefault (vendor.js:78693:18) at HTMLInputElement.
(vendor.js:99218:112) at _ZoneDelegate.invokeTask (polyfills.js:8235:171) at vendor.js:67895:49 at AsyncStackTaggingZoneSpec.onInvokeTask (vendor.js:67895:30) at _ZoneDelegate.invokeTask (polyfills.js:8235:54) at Object.onInvokeTask (vendor.js:68209:25)
We have the same issue when using shadow dom and tooltips.
In the tooltip code 'bindScrollListener' uses 'getScrollableParents' further down which throws the error as soon as the first param is 'document -fragment'