Use Shadow DOM to prevent future bugs related to the CSS of the parent page

[maximedrouhin]

The HTML/CSS code of the extension is porous to the CSS of the parent page, which can easily cause issues, like #39.

I think Shadow DOM is the appropriate solution for this problem, as it prevents any CSS from affecting the code of the extension. It should hopefully prevent many future issues ^^

Here is the documentation of Shadow DOM:

https://developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM

And this reply from ChatGPT 4o guides you on how to implement it for this extension:

https://chatgpt.com/share/66e88d7e-e8f4-800a-a4bb-de7d02794116

[maximedrouhin]

Just another bug caused by CSS from the page affecting the sidebar:

The website uses a modern font, and that font is also applied to the sidebar. In this case, as a beginner Japanese learner, I can't read at all the kanji in the top right.

It's not a huge problem, and that's just on one site, but it's one of the many bugs that using a Shadow DOM can prevent ^^

I'm just dropping that here since I encountered this bug by chance, hopefully that adds context to this obscure-sounding idea of using a Shadow DOM