From 29700a619aa286987c41b58081ef1b24b0680538 Mon Sep 17 00:00:00 2001
From: David Cook <dcook@prosentient.com.au>
Date: Wed, 21 Aug 2024 05:58:59 +0000
Subject: [PATCH] Bug 37697: use shadow DOM for additional contents preview

This change uses the declarative HTML style of Shadow DOM
to encapsulate the additional contents preview so that they don't
affect the main Koha page.

Test plan:
0. Create opacheader with following content:
<style>* { background-color: red }</style>
<p>This is awesome</p>
1. Note that most background-color in /cgi-bin/koha/tools/additional-contents.pl
is now red
2. Click "Preview content" for "opacheader"
3. Note that the background-color of the "p" in "opacheader" is red

4. Apply the patch

5. Refresh the page at /cgi-bin/koha/tools/additional-contents.pl
6. Note that the background-color is normal again
7. Click "Preview content for "opacheader"
8. Note that the background-color of the "p" in "opacheader" is red

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../prog/en/modules/tools/additional-contents.tt              | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
index 30f88bd8d2d..e99cc4d08fe 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
@@ -450,7 +450,9 @@
                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                             </div>
                                         <div class="modal-body">
-                                            [% default_localization.content | $raw %]
+                                            <template shadowrootmode="open">
+                                               [% default_localization.content | $raw %]
+                                            </template>
                                         </div>
                                         <div class="modal-footer">
                                             <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
-- 
2.39.2