/deep/ OR ::ng-deep 的长期替代解决方案是啥？

Posted 2023-03-07

【中文标题】/deep/ OR ::ng-deep 的长期替代解决方案是啥？

【英文标题】：What is the long-term alternative solutions to /deep/ OR ::ng-deep?/deep/ OR ::ng-deep 的长期替代解决方案是什么？

【发布时间】：2019-08-11 01:52:12

【问题描述】：

/deep/ 和 ::ng-deep 这些在 DOM 模式下也被弃用了，我想知道将来是否会有替代 /deep/ 和 ::ng-deep 或者我们应该开始使用其他方式？

::ng-deep .result-container .options-section .option-radio-button .option-text p 
         margin: 5px 0px !important;
         white-space: pre-wrap !important;
     

【问题讨论】：

查看css变量和可构造样式表

【参考方案1】：

就我而言，目前对于 Angular 项目，我使用 ViewEncapsulation.None 作为 @Component 中的参数，并且选择器到达时不使用 Shadow DOM。

例如：

@Component (
     selector: "app-onboarding-process",
     templateUrl: "./onboarding-process.page.html",
     styleUrls: ["./onboarding-process.page.scss"],
     encapsulation: ViewEncapsulation.None
)

【参考方案2】：

目前没有其他选择，所以我们都应该继续使用它，因为它很实用。

当所有浏览器都正确支持 ViewEncapsulation.Native 并支持跨 shadow DOM 边界的样式时，::ng-deep 可能会停止使用。

【讨论】：

Native 使用已弃用的 ShadowDom V0。没有人应该使用它。