docs: clarify that ViewEncapsulation.Native is not supported

[chumtoadafuq]

Bug, feature request, or proposal:

Feature request.

What is the expected behavior?

ViewEncapsulation.Native (shadow DOM) is supported.

What is the current behavior?

Not supported as of beta2.

What are the steps to reproduce?

https://plnkr.co/edit/cYf5hUx1GLXrMLSCg4ci?p=preview
Change the ViewEncapsulation between Native and Emulated.
Native (Shadow DOM) doesn't work with material beta2.

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

Support shadow DOM.

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

"@angular/common": "4.0.0-rc.1",
"@angular/compiler": "4.0.0-rc.1",
"@angular/core": "4.0.0-rc.1",
"@angular/flex-layout": "2.0.0-rc.1",
"@angular/forms": "4.0.0-rc.1",
"@angular/http": "4.0.0-rc.1",
"@angular/material": "2.0.0-beta.2",
Chrome on Win10.

Is there anything else we should know?

Nope.

[WoodyWoodsta]

This would be fantastic and well placed in the web component future.

[playground]

Can this be bumped up in priority? We have widgets that are being used by third parties and we are running into css bleeding into the components on certain sites. And we are having to deal with them individually. Would be fantastic and save us a lot of headaches if ViewEncapsulation.Native will be supported soon.

[jelbourn]

Since this was lacking an official comment:

We don't currently support ViewEncapsulation.Native because our theming requires global styles. Once we are able to use css custom properties (i.e. not support IE11), then we will make the switch.

[amitport]

should add to #7374

[kimamula]

Code splitting does not work at all for Angular Material's CSS due to this issue, and the initial HTML response of an universal app become so huge when one include Angular Material into the app.

Isn't it possible using some other strategy for theming?
For example, sass-loader accepts variables passed from webpack.config.

[jelbourn]

@kimamula see https://material.angular.io/guide/theming#theming-only-certain-components

You can manually create a CSS file that includes only the styles you need for an SSR page.

[kimamula]

@jelbourn Thanks.
Is it possible to apply theme to lazily loaded Angular Material components without including their CSS into the initial page response?

[jelbourn]

You'd have to load the theme file at the same time as the component or else you'd see a flash of unstyled content

[kimamula]

Thanks, it seems working.
But if Angular Material stops depending on global CSS, I don't have to manage the code splitting myself.

I am sorry that this may be a little bit off topic, though.

[tobiaseisenschenk]

Also ViewEncapsulation.ShadowDom (v1 spec) kills Angular Material. Even if the Material css is global. It would be really nice to see some clear documentation about this.

[Splaktar]

I agree that this should be documented in the Getting Started Guide or another commonly read location.

Note that there is already an open issue tracking the need to document this for ViewEncapsulation.ShadowDom.

[jelbourn]

The recent rewrite to the theming guide for Angular v12 covers using the components with Shadow DOM:
https://material.angular.io/guide/theming#theming-and-style-encapsulation

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}