btsiders / ionic-print-test Goto Github PK

Hi, you can style elements inside of a shadow tree using ::part pseudo-element in this way:
https://www.joshmorony.com/using-shadow-parts-to-style-protected-shadow-dom-components/
https://ionicframework.com/docs/theming/css-shadow-parts

Please consider adding it as a solution, as it may be helpful for other people.

Thank you very much, you already helped me very much. Maybe we can put your approach into an npm-package?

I created an event listener, to set position property:

if (window.matchMedia) {
  const mediaQueryList = window.matchMedia('print');
  mediaQueryList.addEventListener('change', (mql) => {
    if (mql.matches) {
      document.querySelectorAll('ion-content').forEach((element) => {
        const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
        scroll.style.position = 'relative';
      });
    } else {
      document.querySelectorAll('ion-content').forEach((element) => {
        const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
        scroll.style.removeProperty('position');
      });
    }
  });
}

Also I extended the styles because I had some problems with (ion-tabs, ion-split-pane):

body {
  position: relative !important;
  max-width: unset !important;
  height: unset !important;
  max-height: unset !important;
  overflow: visible; /* enable scroll on body */
}

ion-app,
ion-router-outlet,
ion-content,
ion-split-pane,
ion-tabs,
.ion-page:not(.ion-page-hidden),
.tabs-inner {
  position: relative !important;
  contain: unset !important;
  display: block !important;
  overflow: unset !important; /* remove default overflow hidden */
}

Dear @btsiders,
I would like first to thank you for pointing me in the right direction. I had the same issue when printing an Ionic app. I totally agree with your solution: adding a CSS variable would not break anything and will solve the problem elegantly.

For the meantime, I have written a directive (the javascript way) that will make an ion-content printable. Anyone can add this directive to app.module.ts (or to a shared module):

  declarations: [
    PrintableDirective,
    ...
  ],

Then you can use it as such:
<ion-content appPrintable>

The directive code is following:

import { Directive, ElementRef, OnInit, Input } from '@angular/core';

@Directive({
    selector: 'ion-content[appPrintable]'
})
export class PrintableDirective implements OnInit {
    constructor(private el: ElementRef) {
    }

    ngOnInit(count = 0) {
        if (count > 10) {
            return;
        }
        // if ion-content is not initilized yet, re-run this method one second later
        if (this.el.nativeElement.shadowRoot.children.length === 0) {
            setTimeout(() => this.ngOnInit(count + 1), 1000);
            return;
        }

        // assign position value to shadowRoot child
        this.el.nativeElement.shadowRoot.children[1].style.position = 'relative';
    }
}