DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2058

ravatsinh · 2019-11-04T08:41:55Z

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

vernvn · 2019-11-06T08:55:43Z

i have the same problem; how to deal with it ?

LucasManerich · 2019-11-27T20:55:25Z

same problem using in angular 8 and ionic 4

UniqueAlex · 2019-12-05T08:21:18Z

Same problem ionic4, how to solve it?

sr-ricky · 2019-12-17T12:53:57Z

I'm facing the same problem with ionic 5... Did someone find any solution?

lanrene · 2019-12-20T01:53:01Z

Interim plan from Yupeng in ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

nuno · 2019-12-22T16:16:36Z

@G-yanpeng Can you please elaborate more your solution? Im trying do the same for ionic 4 angular8 version.

Thank you!

abritopach · 2019-12-22T21:05:52Z

Same problem. Did someone find any solution?

Thanks!

lanrene · 2019-12-24T02:07:42Z

@G-yanpeng Can you please elaborate more your solution? Im trying do the same for ionic 4 angular8 version.

Thank you!

angular8 有了新的变更，导致 html2canvas 不能正常工作。那么就有了这个临时解决方案，让 html2canvas 在 angular 之外工作，将需要生成图片的 dom 拷贝到 angular 入口（app-root）的同层来避免angular造成的影响。

Angular8 has new changes that cause html2canvas to not work properly. Then there is this temporary solution to make html2canvas work outside of angular, copy the dom that needs to generate the image to the same layer of the angular entry (app-root) to avoid the impact of angular.
-- by google translate

ravimallya · 2020-01-01T12:14:00Z

您能否提供xxx.ts组件文件的完整代码？尝试导出到.pdf时，我们也遇到相同的错误。除此错误外，其他一切都正常。我也可以查看.pdf文件。
这是我的代码：
(Translated to Chinese using Google translator)
`
import { Component, OnInit } from '@angular/core';
import { WcExpenditureCalcPipe } from 'src/app/_pipes/wc-expenditure-calc.pipe';
// export to pdf
import { Router } from '@angular/router';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';
import { Platform } from '@ionic/angular';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { File } from '@ionic-native/file/ngx';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';

  @Component({
    selector: 'app-wc-estimate',
    templateUrl: './wc-estimate.page.html',
    styleUrls: ['./wc-estimate.page.scss'],
    providers: [WcExpenditureCalcPipe]
  })
  export class WcEstimatePage implements OnInit {
    dataEntered: any;
    wcEstimate: any;

    // export config
    storageDirectory: any;

    exportAsConfig: ExportAsConfig = {
      type: 'pdf', // the type you want to download
      elementId: 'myDiv', // the id of html/table element
      options: {
        margin: 15,
        jsPDF: {
          orientation: 'portrait',
          format: 'a4',
          unit: 'mm'
        },
        pdfCallbackFn: this.pdfCallbackFn // to add header and footer
      },
    }
    constructor(
      public router: Router,
      private exportAsService: ExportAsService,
      private transfer: FileTransfer,
      private file: File,
      private platform: Platform,
      private fileOpener: FileOpener,
      private wcExpenditureCalcPipe: WcExpenditureCalcPipe
    ) {
      this.platform.ready().then(() => {
        if (!this.platform.is('cordova')) {
          return false;
        }

        if (this.platform.is('ios')) {
          this.storageDirectory = this.file.externalDataDirectory;
        }
        else if (this.platform.is('android')) {
          this.storageDirectory = this.file.externalDataDirectory;
        }
        else {
          return false;
        }
      });
    }

    ngOnInit() {
      this.dataEntered = JSON.parse(localStorage.getItem('DataEntered'));
      this.getValues(this.dataEntered);
    }
    getValues(dataEntered: any) {
      this.wcEstimate = this.wcExpenditureCalcPipe.getWCE(dataEntered)
      console.log(this.wcEstimate);
    }

    // export PDF
    export(event) {
      const fileTransfer: FileTransferObject = this.transfer.create();

      this.exportAsService.get(this.exportAsConfig).subscribe((data: any) => {
        const fileName = 'PReport ' + this.dataEntered.Project_Name + ' - WC Estimate.pdf';
        fileTransfer.download(data, this.storageDirectory + fileName).then((entry) => {
          this.fileOpener.open(entry.toURL(), 'application/pdf').then(() => {
          }).catch(e => {
            console.log('Error opening file', e);
          });
        }, (error) => {
          console.log('error ' + JSON.stringify(error));
        });
      });
      event.preventDefault();
    }
    pdfCallbackFn(pdf: any) {
      // example to add page number as footer to every page of pdf
      const noOfPages = pdf.internal.getNumberOfPages();
      for (let i = 1; i <= noOfPages; i++) {
        pdf.setPage(i);
        pdf.text('WC Estimate', 15, 10)
        pdf.text('Page ' + i + ' of ' + noOfPages, 15, pdf.internal.pageSize.getHeight() - 10);
      }
    }

    //Edit report 
    editClick(event: any) {
      localStorage.setItem('isEdit', 'true');
      this.router.navigateByUrl('/dashboard/landing');

    }
    //done click 
    doneClick(event: any) {
      this.router.navigateByUrl('/dashboard/review');

    }
    // exit click 
    exitClick(event: any) {
      this.router.navigateByUrl('/dashboard/entry-point');
    }

  }

`
The platform.ready event is really not required. I was trying to add to 'Download' folder if it is android and 'Documents' folder if it is iOS.

lanrene · 2020-01-03T10:13:25Z

@ravimallya
I updated the content in html2canvasservice.service.ts, but I don't think it will help you. It should be noted that using this temporary scheme, images can be generated normally, but throw exception will still be reported.
Perhaps you can try PDF generation using JSPDF and html2canvas.

kennethross · 2020-05-04T14:18:00Z

Interim plan from Yupeng in ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

Thank you so much! Great workaround!

derek90 · 2020-06-08T15:36:28Z

Interim plan from Yupeng in ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

I get the following error: "ERROR TypeError: html2canvas is not a function" in the following function call from the service:

return html2canvas(ele, option).then((canvas) => {
    if (canvas) {
        return canvas.toDataURL('image/png');
    }
    return null;
})

venkatesanvaishali · 2020-07-21T10:20:18Z

Interim plan from Yupeng in ionic4

index.html

<body>
  <div id="html2canvas"></div>
  <app-root></app-root>
</body>

xxx.ts

const element = document.getElementById('html2canvas');
const targetElement = document.getElementById('target').cloneNode(true);
element.appendChild(targetElement);
this.html2canvas.html2canvas(element.firstChild).then((img) => {
    this.img = img;
    element.firstChild.remove();
}).catch((res) => {
    console.log(res);
});

Html2canvasService.service.ts

import {Injectable} from '@angular/core';
import {AlertService} from './alert.service';

declare let html2canvas;

@Injectable()
export class Html2canvasService {
    constructor(private alert: AlertService) {

    }

    public html2canvas(ele) {

        if (!ele) {
            return;
        }

        const option = {allowTaint: true, useCORS: true};
        return html2canvas(ele, option).then((canvas) => {
            if (canvas) {
                return canvas.toDataURL('image/png');
            }
            return null;
        }).catch((res) => {
            console.log(res);
            return res;
        });
    }
}

This works vey well. Thank you so much for the solution. With ionic native elements(like ion-text, ion-icon inside the element to copy) this is not working. But i changed my ionic elements to html. Now it is working perfect.

fromage9747 · 2021-04-18T10:00:18Z

welp... 2021 and this issue is still present. The above workaround doesn't work for me. I still get the same error.

Hanzofm · 2021-05-05T09:37:44Z

Same problem here :(

coloz · 2021-05-06T11:40:03Z

angular9，Same problem is still present.

dluigirafael · 2021-05-17T05:58:34Z

Ionic React, same problem.

fromage9747 · 2021-05-17T06:10:26Z

What solved it for me was using dom-to-image-improved https://www.npmjs.com/package/dom-to-image-improved
`import domToImage from 'dom-to-image-improved';
const result = await domToImage.toPng(this.printableArea, domToImageOptions);

if (result) {
const doc = new jspdf.jsPDF('p', 'mm', 'a4');
doc.addImage(result, 'PNG', 20, 20, 290, 260);
const pdfOutput = doc.output();
const buffer = new ArrayBuffer(pdfOutput.length);
const array = new Uint8Array(buffer);
for (let i = 0; i < pdfOutput.length; i++) {
array[i] = pdfOutput.charCodeAt(i);
}
}`

Can't for the life of me get the code block to work...

torrobinson · 2021-06-28T14:10:31Z

For anyone arriving here via Google looking for a solution, @ibrahimAboelsuod's fork contains a built version of a fix here.

I was able to swap out the built .min.js file and it resolved my issues.

AntoscencoVladimir · 2021-10-28T00:11:42Z

@lanrene thank you

BO-DI · 2023-09-26T09:58:24Z

i also have a sample problem.
for example:
1/function page

2/code page

3/problem page

ravimallya mentioned this issue Dec 28, 2019

Blank PDF in Ionic 4 wnabil/ngx-export-as#47

Closed

claviska mentioned this issue Dec 9, 2020

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2325

Closed

2 tasks

MarcSkovMadsen mentioned this issue Nov 27, 2021

html2canvas not working with Fast Design Framework #2759

Closed

niklasvh mentioned this issue Dec 31, 2021

fix: adopted stylesheets #2785

Merged

niklasvh closed this as completed in #2785 Dec 31, 2021

Wanchai mentioned this issue Mar 24, 2022

Use it on ionic v6 Wanchai/ngx-capture#39

Closed

siaikin mentioned this issue Sep 1, 2023

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed MatthewHerbst/react-to-print#638

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2058

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2058

ravatsinh commented Nov 4, 2019

vernvn commented Nov 6, 2019

LucasManerich commented Nov 27, 2019

UniqueAlex commented Dec 5, 2019 •

edited

sr-ricky commented Dec 17, 2019

lanrene commented Dec 20, 2019 •

edited

nuno commented Dec 22, 2019 •

edited

abritopach commented Dec 22, 2019

lanrene commented Dec 24, 2019

ravimallya commented Jan 1, 2020

lanrene commented Jan 3, 2020 •

edited

kennethross commented May 4, 2020

Interim plan from Yupeng in ionic4

derek90 commented Jun 8, 2020

Interim plan from Yupeng in ionic4

venkatesanvaishali commented Jul 21, 2020

Interim plan from Yupeng in ionic4

fromage9747 commented Apr 18, 2021

Hanzofm commented May 5, 2021

coloz commented May 6, 2021

dluigirafael commented May 17, 2021

fromage9747 commented May 17, 2021

torrobinson commented Jun 28, 2021

AntoscencoVladimir commented Oct 28, 2021

BO-DI commented Sep 26, 2023 •

edited

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2058

DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed #2058

Comments

ravatsinh commented Nov 4, 2019

vernvn commented Nov 6, 2019

LucasManerich commented Nov 27, 2019

UniqueAlex commented Dec 5, 2019 • edited

sr-ricky commented Dec 17, 2019

lanrene commented Dec 20, 2019 • edited

Interim plan from Yupeng in ionic4

nuno commented Dec 22, 2019 • edited

abritopach commented Dec 22, 2019

lanrene commented Dec 24, 2019

ravimallya commented Jan 1, 2020

lanrene commented Jan 3, 2020 • edited

kennethross commented May 4, 2020

Interim plan from Yupeng in ionic4

derek90 commented Jun 8, 2020

Interim plan from Yupeng in ionic4

venkatesanvaishali commented Jul 21, 2020

Interim plan from Yupeng in ionic4

fromage9747 commented Apr 18, 2021

Hanzofm commented May 5, 2021

coloz commented May 6, 2021

dluigirafael commented May 17, 2021

fromage9747 commented May 17, 2021

torrobinson commented Jun 28, 2021

AntoscencoVladimir commented Oct 28, 2021

BO-DI commented Sep 26, 2023 • edited

UniqueAlex commented Dec 5, 2019 •

edited

lanrene commented Dec 20, 2019 •

edited

nuno commented Dec 22, 2019 •

edited

lanrene commented Jan 3, 2020 •

edited

BO-DI commented Sep 26, 2023 •

edited