Primeng: css theme body prefix makes primeng not compatible with shadowdom

[gustavomick]

see

https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/nova-light/theme.css

all styles are prefixed with body, i guess this has a reason but in the end prevents using ShadowDom.

is there any way to workaround or possibility to remove the body?

is primeng expecting to support shadodowm or this prefix is here considering that feature wont be here soon. thanks

[cagataycivici]

As a coincidence, as of next week we'll begin a major overhaul of the core css and theming to modernize them. It will be backward compatible and will solve a couple of issues like this. There won't be a body tag soon and theme.css - primeng.css will be smaller.

[gustavomick]

@cagataycivici any chance to remove the body tag before this, looks your enhancements could take longer time than this. thanks

[irekBudzowski]

@gustavomick it looks like the newest version of primeng is already modernized:
https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/nova/theme.css

[irekBudzowski]

@cagataycivici could you explain please, how to use primeng 10 with encapsulation: ViewEncapsulation.ShadowDom component?
When the ShadowDom is enabled, in DOM there is new #shadow-root capsule created and component has no styles from the app, which is expected.
But when I append the #shadow-root link with theme.css and primeng.css, I can see that components are styled, but I cannot interact with it (for example dropdown wont open).

[irekBudzowski]

@gustavomick did you solve the problem I highlighted above? Any info would be very helpful.

[jlamarr22]

@irekBudzowski Ran in to the display issue as well with a microfrontend that's being wrapped with ViewEncapsulation.ShadowDom. Seems like the easiest solution is to override the default behavior of show in the component. This is how I overrode this for autocomplete (which just calls .shadowRoot.activeElement):

import { Directive } from '@angular/core';
import { Host, Self, Optional } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';

@Directive({
    selector: '[p-autoCompleteOverride]',
})
export class AutoCompleteOverrideDirective {

    constructor(@Host() @Self() @Optional() private hostSel: AutoComplete) {
        hostSel.show = () => {
            return this.show();
        }
    }

    show() {
        if (this.hostSel.multiInputEL || this.hostSel.inputEL) {
            const hasFocus = this.hostSel.multiple ? 
                this.hasFocus(this.hostSel.multiInputEL.nativeElement) : 
                this.hasFocus(this.hostSel.inputEL.nativeElement);

            if (!this.hostSel.overlayVisible && hasFocus) {
                this.hostSel.overlayVisible = true;
            }
        }
    }

    hasFocus(nativeElement: Element): boolean {
        const activeElement = nativeElement.ownerDocument.activeElement;
        return activeElement.shadowRoot ? 
            activeElement.shadowRoot.activeElement == nativeElement : 
            activeElement == nativeElement;
    }
}

Usage in HTML:

<p-autoComplete p-autoCompleteOverride ... > </p-autoComplete>

This leads to the following error, but it "works" at least:

core.js:4197 ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at overflowCheck (primeng-dom.js:149)
    at Function.getScrollableParents (primeng-dom.js:163)
    at ConnectedOverlayScrollHandler.bindScrollListener (primeng-dom.js:499)
    at AutoComplete.bindScrollListener (primeng-autocomplete.js:670)
    at AutoComplete.onOverlayAnimationStart (primeng-autocomplete.js:388)
    at AutoComplete_div_6_Template_div_animation_overlayAnimation_start_0_listener (primeng-autocomplete.js:152)
    at executeListenerWithErrorHandling (core.js:14316)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14351)
    at animations.js:196
    at Array.forEach (<anonymous>)