Development/ Isolate extension CSS from DOM

⁉️ Ask us anything!
#1

Hello community!
I ran into this great extension through a friend recommendation.

I am currently developing a chrome extension which works as a sidebar aswel.

Is there someone who could give me advice on how to isolate css styling from original document page?

Thanks a lot, I will be playing around with memex!

#2

Does this do the work on memex?

:host {all: initial}

I tried:

 .appClassname * { all: initial }

on my app container, but it breaks css imports on childs.

I hope it is ok to post developing questions here by the way :roll_eyes:

#3

Check out ShadowDom: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Also check out how we use it: https://github.com/WorldBrain/Memex/blob/686ff904507be6faea4f6502620dcb02763c9a93/src/in-page-ui/dom.ts

#4

I looked your html code and ran into shadow dom, I’ve been studying it but couldn’t find how you implemented it in your repo (there is so much going on there haha)

Thanks a lot for sharing the exact file to your implementation!