fix: svg style bug in @regexper/render

@regexper/render use a stylesheet in svg that cause bugs in whole site. So add regexper in a shadow root

Author: sharevb

package.json

@@ -42,8 +42,8 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
-    "@types/markdown-it": "^13.0.7",
     "@types/figlet": "^1.5.8",
+    "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -95,6 +95,7 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.1.6",
+    "vue-shadow-dom": "^4.2.0",
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
 
 import { registerSW } from 'virtual:pwa-register';
+import shadow from 'vue-shadow-dom';
 import { plausible } from './plugins/plausible.plugin';
 
 import 'virtual:uno.css';
@@ -23,5 +24,6 @@ app.use(i18nPlugin);
 app.use(router);
 app.use(naive);
 app.use(plausible);
+app.use(shadow);
 
 app.mount('#app');

src/main.ts

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import RandExp from 'randexp';
 import { render } from '@regexper/render';
+import type { ShadowRootExpose } from 'vue-shadow-dom';
 import { matchRegex } from './regex-tester.service';
 import { useValidation } from '@/composable/validation';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
@@ -13,7 +14,7 @@ const multiline = ref(false);
 const dotAll = ref(true);
 const unicode = ref(true);
 const unicodeSets = ref(false);
-const visualizerSVG = ref() as Ref<SVGSVGElement>;
+const visualizerSVG = ref<ShadowRootExpose>();
 
 const regexValidation = useValidation({
   source: regex,
@@ -70,12 +71,20 @@ const sample = computed(() => {
 watchEffect(
   async () => {
     const regexValue = regex.value;
-    const svg = visualizerSVG.value;
-    svg.childNodes.forEach(n => n.remove());
-    try {
-      await render(regexValue, svg);
-    }
-    catch (_) {
+    // shadow root is required:
+    // @regexper/render append a <defs><style> that broke svg transparency of icons in the whole site
+    const visualizer = visualizerSVG.value?.shadow_root;
+    if (visualizer) {
+      while (visualizer.lastChild) {
+        visualizer.removeChild(visualizer.lastChild);
+      }
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      try {
+        await render(regexValue, svg);
+      }
+      catch (_) {
+      }
+      visualizer.appendChild(svg);
     }
   },
 );
@@ -176,7 +185,9 @@ watchEffect(
     </c-card>
 
     <c-card title="Regex Diagram" style="overflow-x: scroll;" mt-3>
-      <svg ref="visualizerSVG" />
+      <shadow-root ref="visualizerSVG">
+&#xa0;
+      </shadow-root>
     </c-card>
   </div>
 </template>