primeng icon indicating copy to clipboard operation
primeng copied to clipboard

components errors with ViewEncapsulation.ShadowDom

Open JeremieSoftcom opened this issue 10 months ago • 1 comments

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

JeremieSoftcom avatar Apr 18 '24 12:04 JeremieSoftcom

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)

srollinet avatar Apr 22 '24 08:04 srollinet

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'

LoaderB0T avatar Sep 16 '24 11:09 LoaderB0T