Does primeng-shadowdom-directives support p-table?

[msbasanth]

Hi,

We are facing issues when placing p-table inside a custom element created using LitElement. i.e. when we have p-table inside the shadowDom. Does primeng-shadowdom-directives support p-table?

[papb]

According to the readme, no. But what issues are you facing? I would expect p-table to work automatically

[maitrungduc1410]

The p-table should work fine, what issue are u facing?

the library is to solve issue with all component has “overlay” of primeNG inside ShadowDOM (lit-element of course), p-table is not such components, so I expect it should work automatically.

[maitrungduc1410]

If you’re facing issue where no style applied to your table inside shadowDOM, then it is how it is, not just for primeng, for other libs also. Simply add primeng CSS files directly to your component. I already commented here

[msbasanth]

Thanks @maitrungduc1410 @papb for your quick response.

One observation is, table rendering is having issues when we use the virtual scroll, when disabling the virtual scroll table rendering looks fine.

This is the sample virtual p-table I kept in a simple custom element, https://github.com/msbasanth/primeng-shadowdom

This is the current structure,

Another observation is when we dynamically add table containers through dev tools themes are coming and working.

I saw your solution to add styles directly to container Angular Component, but in my case I have a custom element instead of Angular Component. I have not tried applying style inside shadow dom. Do we have a way to add priming CSS files directly to table-container (custom element)?

[papb]

I have not tried applying style inside shadow dom.

I had to do exactly this. In summary:

// <app-root> component

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<app-main></app-main>',
  encapsulation: ViewEncapsulation.ShadowDom,
  styleUrls: ['../styles.scss'],
})
export class AppComponent {}

// styles.scss

@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/primeflex/primeflex.css";
@import "../node_modules/primeng/resources/themes/saga-blue/theme.css";
@import "../node_modules/primeng/resources/primeng.min.css";
@import "./assets/styles/simplified-primeng-showcase/app.scss";

html, body {
  margin: 0;
  padding: 0;
}

label {
  cursor: inherit;
}

The above basically makes all PrimeNG css available within the shadow dom.

Note: ./assets/styles/simplified-primeng-showcase/app.scss is a bunch of styles that I took from here and adapted. You might not need it.

Note: you will need to heavily increase the size budget for anyComponentStyle within angular.json though (I put 10m on mine):

// angular.json excerpt

{
  "projects": {
    "my-cool-project": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "10mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "5mb",
                  "maximumError": "10mb"
                }
              ]
            }
          }
        }
      }
    }
  }
}

Thankfully this super large size is not a problem for me.

[maitrungduc1410]

yeah, this is the trade off, you need to import all primeng styles, at every component level when you render it inside shadow dom.

[msbasanth]

@maitrungduc1410 @papb One difference in the sample I shared (https://github.com/msbasanth/primeng-shadowdom) is I am using a custom element instead of an Angular component for hosting p-table. i.e. shadow dom is created by LitElement.

So injecting styles to Angular Component may not help here. Do you know a way to inject style into the custom element scope?

Another observation I have is when the custom element render finishes before p-table render(Angular), the table renders fine and is visible. We could achieve this basically through the below options (both works),

1. Load p-table inside an Angular component dynamically. Using this.viewContainer.createComponent
2. Add ngIf which gets evaluated with a property that changes, wait for container custom element finish rendering, in this case also p-table is rendered fine.

   
   **html**
   <ng-container *ngIf="display">

ngOnInit const container= document.querySelector('table-container') as any; container.updateComplete.then(()=>{ this.display = true; })

Now the same sample is updated with await for custom element render.
https://github.com/msbasanth/primeng-shadowdom

[artzfly]

I checked two cases,

1. PrimeNG components in ShadowDOM (styles doesn't work) and
2. PrimeNG components inside slot in a ShadowDOM (styles work) as shown below.

PrimeNG Component Not Working Demo - NgShadowDom https://stackblitz.com/edit/primeng-autocomplete-demo-aha9nr

PrimeNG Component Working Demo - LitSlotShadowDom https://stackblitz.com/edit/primeng-autocomplete-demo-tb9yzj

It looks like when we use slot, PrimeNG themes are getting applied and not seeing any issues. On the other side when we use Angular Component with ViewEncapsulation or LitElement component encapsulating PrimeNG component causes the styles not working.

@maitrungduc1410 @papb Hope observations are similar in your case.

[antoniomolinadev]

I checked two cases,

1. PrimeNG components in ShadowDOM (styles doesn't work) and
2. PrimeNG components inside slot in a ShadowDOM (styles work) as shown below.

PrimeNG Component Not Working Demo - NgShadowDom https://stackblitz.com/edit/primeng-autocomplete-demo-aha9nr

PrimeNG Component Working Demo - LitSlotShadowDom https://stackblitz.com/edit/primeng-autocomplete-demo-tb9yzj

It looks like when we use slot, PrimeNG themes are getting applied and not seeing any issues. On the other side when we use Angular Component with ViewEncapsulation or LitElement component encapsulating PrimeNG component causes the styles not working.

@maitrungduc1410 @papb Hope observations are similar in your case.

For me, works with this code: https://github.com/maitrungduc1410/primeng-shadowdom-directives/issues/11

Regards