[w3c/webcomponents] Provide an option which allows global CSSes styling elements inside a shadow tree (#769)

# Motivation

Almost every website has global stylesheets. Lots of sites uses global resets such as `* { box-sizing: border-box }` or `normalize.css`. Some sites uses third party css libraries like `bootstrap` or `fontawesome`. All of them won't play well with ShadowDOM.

Components are not always designed for reuse. A component can be a page ( for SPA ), or a sort of elements in a page ( just because developers want to split their logics into a new file ). They still need style isolation to prevent styles escaping from their component scope but it doesn't means they don't want global stylesheets.

The only option for now is including every global css files in ShadowDOM ( using `<link>` or `@import` ) for every component, which is complicate and may affect rendering performance because browsers need to parse CSS scripts for every component ).

# Proposal

I'm suggesting a option that allows global styles to go in ( but forbids styles in ShadowDOM to go out ).

```ts
interface ShadowRootInit {
    mode: "open" | "closed";
    outsideStyle?: 'allow' | 'forbid'; // proposed, default value is 'forbid' which is compatible with current behavior
}
```

The key name is not decided, for explanation only.

This proposal can be better than `>>>` and `/deep/` because it is component itself that accepts outside styles instead of forcing a component applies them passively.

Sorry for my Chinglish. Any thoughts are welcome.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/769