Shadow tree inheriting from parent

Wildhoney / ReactShadow

:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.

https://react-shadow.herokuapp.com/

MIT License

1.29k stars 80 forks source link

Shadow tree inheriting from parent #123

Open rrs94 opened 2 years ago

rrs94 commented 2 years ago

Hi, I'm trying to test out this library but I'm having issues with getting the expected behavior to work, I modified the example: https://codesandbox.io/s/react-shadow-forked-4717v?file=/src/index.js:454-459

So that the parent of the shadow host has a "color: red" style applied to it, and this style is being inherited by the elements inside the shadow tree even this is not supposed to happen. Am I doing something wrong or perhaps I misunderstood the functionality of shadow dom? Thanks!

lancesnider commented 2 years ago

I'm having the same issue.

Screen-Shot-2022-03-17-at-1 01 42-PM

lancesnider commented 2 years ago

Okay, found the answer 2 seconds after posting this. :) Here's the relevant thread: https://github.com/Wildhoney/ReactShadow/issues/68

Turns out there are still some styles that bleed through the shadow boundary. I got around this by adding all: initial; to the top-level class.