Angular不使用ViewEncapsulation.None如何正确设置组件背景样式

• Angular默认使用ViewEncapsulation.Emulated封装模式，会为组件内所有样式自动添加唯一的属性前缀（如[_ngcontent-xxx]），确保样式仅作用于组件内部DOM元素。你在组件样式中定义的html、body选择器，会被处理为html[_ngcontent-xxx]、body[_ngcontent-xxx]，而页面全局的html、body元素并不携带这个专属属性，因此样式完全不生效。
• 你开启ViewEncapsulation.None时，Angular不会给样式加属性前缀，组件样式会暴露为全局样式，因此能命中全局的body元素，背景和字体样式正常生效，但同时也会污染全局样式影响其他组件。
• 组件模板中不应该出现<body>标签，HTML规范要求单页面仅能存在一个根body元素，组件内写的body只会被浏览器识别为普通元素，并非页面根节点，给它加样式也无法实现全屏背景效果。

方案1：全局样式管理（推荐用于通用全局规则） #

将属于全局范围的样式（如全局重置、body基础样式）放到项目全局样式文件中（Angular项目默认是src/styles.css），无需修改组件的封装模式，也不会出现样式冲突：

/* 写在全局styles.css里 */
* {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
}

html,body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

组件内只需要写自身的内容样式即可。

方案2：组件内限定全局样式生效范围（推荐仅当前组件需要修改全局样式时使用） #

如果你只希望当前组件显示时生效背景样式，其他页面不受影响，可以在组件样式中结合:host和::ng-deep使用，不会污染全局：

/* 写在当前组件的样式文件里 */
:host ::ng-deep body {
    background: linear-gradient(25deg, #b24592, #f15f79) no-repeat;
}

加上:host前缀后，该样式仅在当前组件实例存在时生效，组件销毁后不会残留影响其他页面。

方案3：完全不修改全局body（最推荐，无任何副作用） #

直接给当前组件的根元素设置全屏样式，不需要碰全局body，完全不需要修改封装模式，也不会有任何样式冲突：

1. 组件模板去掉错误的<body>标签，用普通div包裹内容即可：

<div class="login-shop-background">
    /* 此处为组件内容 */
</div>

2. 组件样式中设置根元素全屏：

/* 写在当前组件的样式文件里 */
:host {
    display: block;
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(25deg, #b24592, #f15f79) no-repeat;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
}

这里的:host选择器直接命中组件自身的根标签，样式完全隔离，不会影响其他任何组件。

内容的提问来源于stack exchange，提问作者Manuel Brás