CSS not working inside shadow DOM

[JeroenVdb]

Step 0: Describe your environment

• diff2html version: 3.4.45
• Using diff2html directly or using diff2html-ui helper: diff2html

Step 1: Describe the problem:

Steps to reproduce:

1. Update diff2html to 3.4.45
2. Use diff2html.min.css inside a web component with shadow DOM

diff example:

diff --git describe.c
index fabadb8,cc95eb0..4866510
--- a/describe.c
+++ b/describe.c
@@@ -98,20 -98,12 +98,20 @@@
   return (a_date > b_date) ? -1 : (a_date == b_date) ? 0 : 1;
 }

Observed Results:

Because the diff2html.min.css is loaded inside a web component with shadow DOM it can not set the css variables on :root element.

Expected Results:

The styling is also applied when using inside a web component.

Relevant Code:

<template id="my-element">
  <style>
    :root {
      color: red;
    }
    span {
      border: 2px dotted black;
    }
  </style>
  <span>I'm in the shadow DOM and I will NOT be red</span>
</template>

<div id="host"></div>
<span>I'm not in the shadow DOM</span>

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const template = document.getElementById("my-element");

shadow.appendChild(template.content);

Example on how the color is not set when using a variable that should be applied to :root: https://developer.mozilla.org/en-US/play?id=c3O%2FxsDE9LYm4ARVcuQ8%2Bc9RJO9xg8yfeGzAZNSsPRIwUjwbb3NOSM1pCXz5ic7Npjkl6UAIZyFOdwcx

Possible solution:

Solution I often see is setting the variables to :host and :root.

:root, :host {
  --d2h-bg-color:#fff;
}