search

MatthewHerbst / react-to-print

Print React components in the browser. Supports Chrome, Safari, Firefox and EDGE
MIT License
2.06k stars 221 forks source link

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

Open NeluQi opened 1 year ago

NeluQi commented 1 year ago

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

i use Ionic

Ionic use ShadowRoot

pls fix

MatthewHerbst commented 1 year ago

Hello. Can you provide more details please, include code samples and/or a working Codesandbox? I am not familiar with Ionic.

NeluQi commented 1 year ago

Right now I have no opportunity to give a ready-made example.

Try to run any demo https://ionicframework.com/ and try to print the block with any few components

The problem is most likely in the use https://ionicframework.com/docs/theming/css-shadow-parts

Below is a very similar example on vue3 npm i npm run serve bug-ionic-modal-master.zip

siaikin commented 1 year ago

I found a similar issue in html2canvas and a solution in this issue and pull request.

We need to copy the entire Shadow DOM, including its internal DOM elements and all styles, to the print document. In other words, we need to convert the Shadow DOM to a regular DOM.

By the way, this is an issue from vue-to-print.

MatthewHerbst commented 11 months ago

The more I look at this the more I question what we should do here. The only way I've found to copy all of the shadow DOMs is to walk the entire DOM tree, check each node to see if it has a shadow tree, and clone it if there is one. I would really like to avoid having to iterate through the entire DOM tree. Curious to know your thinking on this @siaikin

siaikin commented 11 months ago

Unfortunately, it seems like iterating is the only option. The related issue https://github.com/whatwg/dom/issues/665 has not made any progress.

I implemented this functionality in https://github.com/siaikin/vue-to-print/pull/5, which required me to almost rewrite the code that clones specific elements (because it needs to clone the DOM through iteration instead of querySelector).

print example: https://vue-to-print.netlify.app/guide/basic-usage.html#print-web-components

I think this is a significant change that needs to be approached with caution. Perhaps you can implement it in a new library https://github.com/gregnb/react-to-print/issues/635#issuecomment-1682706037.

indraeng commented 6 months ago

i am facing the same problem ,but i have noticed that this error is occuring in chrome but the same code is working in microsoft edge and firefox properly

siaikin commented 6 months ago

i am facing the same problem ,but i have noticed that this error is occuring in chrome but the same code is working in microsoft edge and firefox properly

No idea. Can you provide an online code example?

stavan-vc commented 6 months ago

I guess you can use this sandbox. It is also using ShadowDOM.