try shadowDOMs

frontend/frontend/src/components/Card/SVG.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-danger */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import Skeleton from 'react-loading-skeleton';
@@ -9,10 +9,8 @@ import 'react-loading-skeleton/dist/skeleton.css';
 
 const SvgInline = (props) => {
   const [svg, setSvg] = useState(null);
-
-  // eslint-disable-next-line no-unused-vars
   const [loaded, setLoaded] = useState(false);
-
+  const containerRef = useRef(null);
   const { url } = props;
 
   useEffect(() => {
@@ -24,6 +22,23 @@ const SvgInline = (props) => {
       .catch((e) => console.error(e));
   }, [props.url]);
 
+  useEffect(() => {
+    if (loaded && svg && containerRef.current) {
+      // Attach shadow root if not already present
+      let shadow = containerRef.current.shadowRoot;
+      if (!shadow) {
+        shadow = containerRef.current.attachShadow({ mode: 'open' });
+      }
+      // Clear previous content
+      shadow.innerHTML = '';
+      // Insert SVG
+      const wrapper = document.createElement('div');
+      wrapper.id = 'svg-card';
+      wrapper.innerHTML = svg;
+      shadow.appendChild(wrapper);
+    }
+  }, [loaded, svg]);
+
   if (props.forceLoading || !loaded) {
     if (props.compact) {
       return <Skeleton style={{ paddingBottom: '58%' }} />;
@@ -31,25 +46,8 @@ const SvgInline = (props) => {
     return <Skeleton style={{ paddingBottom: '95%' }} />;
   }
 
-  if (props.compact) {
-    return (
-      <div
-        className={props.className}
-        dangerouslySetInnerHTML={{
-          __html: `<div id="svg-card">${svg}</div>`,
-        }}
-      />
-    );
-  }
-
-  return (
-    <div
-      className={props.className}
-      dangerouslySetInnerHTML={{
-        __html: `<div id="svg-card">${svg}</div>`,
-      }}
-    />
-  );
+  // Render a container div for the shadow DOM
+  return <div ref={containerRef} className={props.className} />;
 };
 
 SvgInline.propTypes = {