Components: docs: clarify support for ViewEncapsulation.ShadowDom

[Splaktar]

Proposal

What is the expected behavior?

If ViewEncapsulation.ShadowDom is not supported, this should be called out in the docs to save developers time and frustration.

What is the current behavior?

ViewEncapsulation.ShadowDom is not supported and is not documented.

What are the steps to reproduce?

1. Open https://stackblitz.com/edit/angular-i5jw3k?file=app/table-selection-example.ts
2. Notice how the checkboxes aren't themed
3. Open https://stackblitz.com/edit/angular-sbrzfb?file=app/input-overview-example.ts
4. Notice how the inputs are not themed or styled properly

What is the use-case or motivation for changing an existing behavior?

To save developers time and frustration.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 7.0.0
Angular Material: 7.0.2
TypeScript: ~3.1.1
Browsers: Tested on Chrome, Firefox, and Safari latest stable versions

Is there anything else we should know?

Nope

[zlepper]

Is there any plans to support ShadowDom at some point?

[jelbourn]

We have to define that "support" means, as well. We'll probably never change the components to _use_ Shadow DOM, but when we switch to CSS variables the theming system won't prevent other people from using it.

[xerofun]

@jelbourn where is this on the road map (days, weeks, months)? We're starting to plow headlong into a webcomponent architecture but are heavily invested (and wish to remain so) with our material components.

Are you aware of a way to work around this. Since we're just starting off with componentizing some of our resources, it wouldn't be much effort to make the components happy with angular.

[jelbourn]

Switching the theming system to use CSS variables is probably going to be early 2020, but for other things (like overlays) we don't have concrete plans yet.

[Splaktar]

Note that when working with Angular Elements, ViewEncapsulation.None and using Sass (SCSS) to make sure that your styles are scoped to components is recommended at this time.

[PapaNappa]

We are now approaching mid 2020. What is the status and roadmap of this?

Being able to use material in components with ShadowDom opens a lot of opportunities and cleaner components/code/CSS.