components errors with ViewEncapsulation.ShadowDom

[JeremieSoftcom]

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

[srollinet]

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)

[LoaderB0T]

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'

[omsix]

Hi, I am having the same issue with the tooltip and the shadow dom using primeng 17.8.11 zone.js:1159 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at a (primeng-dom.mjs:198:47) at r.getScrollableParents (primeng-dom.mjs:212:46) at Ote.bindScrollListener (primeng-dom.mjs:732:45) at r.bindScrollListener (primeng-tooltip.mjs:571:28) at r.show (primeng-tooltip.mjs:401:14) at r.activate (primeng-tooltip.mjs:306:22) at r.onMouseEnter (primeng-tooltip.mjs:271:18) when the html element on which the tooltip is defined is nested under an element with a shadow-root , the parameter of getComputedStyle is a document-fragment instead of an element.