At least in chrome you can enable "Show user agent shadow DOM" in the Settings. I don't know about other browsers, sorry.
Yes, that's what I'm talking about. I enabled that setting, edited the css in the shadow dom, and it only changed the appearance of the component I was in, not all the other components of the same type.
As far as I can tell, shadow-dom and web components are anti-tinker in that they don't allow users to play with the underlying definitions in order to learn how to use those technologies themselves. I think that will be a big barrier to adoption.
I tried it on the new chrome manage bookmarks page to reduce the whitespace but I could only edit a single instance; I couldn't adjust the whole page the way you can with normal CSS.