Embed a Full HTML Document Inline Using Shadow DOM

We use ColdFusion/CFML to generate valid HTML documents for PDF generation using jsoup & WKHTMLTOPDF. If the generated HTML content is simply outputted onto an existing webpage, the webpage becomes invalid (due to double DOCTYPE “inception”) and th…


This content originally appeared on DEV Community and was authored by James Moberg

We use ColdFusion/CFML to generate valid HTML documents for PDF generation using jsoup & WKHTMLTOPDF. If the generated HTML content is simply outputted onto an existing webpage, the webpage becomes invalid (due to double DOCTYPE "inception") and the website's global CSS styles will polluting the preview.

In order to view the final result correctly, the HTML document would have to be viewed independently within a new tab (using window.open or target="_blank") or embedded in an iFrame.

Another approach that we've been experimenting with uses the browser's shadow DOM. This has worked well for our needs so far, but is pretty specific... it generates a standalone shadow DOM and populates it with the content within an existing webpage so it can be more faithfully rendered without any interactivity. Our PDF & email previews are now rendered inline and are much easier to review.

Source Code

https://gist.github.com/JamoCA/0774f707e8b18b61bc95b5f2c39b1f9f


This content originally appeared on DEV Community and was authored by James Moberg


Print Share Comment Cite Upload Translate Updates
APA

James Moberg | Sciencx (2024-09-18T19:49:42+00:00) Embed a Full HTML Document Inline Using Shadow DOM. Retrieved from https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/

MLA
" » Embed a Full HTML Document Inline Using Shadow DOM." James Moberg | Sciencx - Wednesday September 18, 2024, https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/
HARVARD
James Moberg | Sciencx Wednesday September 18, 2024 » Embed a Full HTML Document Inline Using Shadow DOM., viewed ,<https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/>
VANCOUVER
James Moberg | Sciencx - » Embed a Full HTML Document Inline Using Shadow DOM. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/
CHICAGO
" » Embed a Full HTML Document Inline Using Shadow DOM." James Moberg | Sciencx - Accessed . https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/
IEEE
" » Embed a Full HTML Document Inline Using Shadow DOM." James Moberg | Sciencx [Online]. Available: https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/. [Accessed: ]
rf:citation
» Embed a Full HTML Document Inline Using Shadow DOM | James Moberg | Sciencx | https://www.scien.cx/2024/09/18/embed-a-full-html-document-inline-using-shadow-dom/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.