From 06b6924a3500183353ff4bc1e27686e44f60e957 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>
---
 .../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 30f88bd8d2..e99cc4d08f 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