fix(ui): Prevent inheritable styles from affecting rikaikun

extension/css/popup.css

@@ -63,20 +63,10 @@ table {
   color: inherit;
 }
 
-#rikaikun-shadow {
-  all: initial;
-}
-
-/* Supported starting in Chrome 84 */
-@supports (all: revert) {
-  #rikaikun-shadow {
-    all: revert;
-  }
-}
-
 /* Need duplicate selector for gracefully handling reset. */
 /* stylelint-disable-next-line no-duplicate-selectors */
 #rikaikun-shadow {
+  all: initial;
   background: var(--primary-background-color);
   border: 1px solid #d0d0d0;
   border-radius: 5px;

extension/test/e2e_visual_test.ts

@@ -250,6 +250,26 @@ describe('Visual Regression Tests', function () {
       });
     });
   });
+
+  it('should render correctly,ignoring external styles', async function () {
+    const clock = sinon.useFakeTimers();
+    const span = insertHtmlIntoDomAndReturnFirstTextNode(
+      '<span>あいたくない</span>'
+    ) as HTMLSpanElement;
+    const style = document.createElement('style');
+    style.id = 'test-id';
+    style.textContent =
+      'body { text-align: center; } div { text-decoration: underline; !important}';
+    document.head.appendChild(style);
+
+    await triggerMousemoveAtElementStart(span);
+    // Tick the clock forward to account for the popup delay.
+    clock.tick(150);
+    await waitForVisiblePopup();
+
+    await takeSnapshot('ignoring-external-styles');
+    style.remove();
+  });
 });
 
 async function toggleRikaikun() {