::shadow 和 /deep/ 的替代品是啥？

Posted 2023-02-19

【中文标题】::shadow 和 /deep/ 的替代品是啥？

【英文标题】：What's the substitute for ::shadow and /deep/?::shadow 和 /deep/ 的替代品是什么？

【发布时间】：2016-06-14 23:33:10

【问题描述】：

如https://www.chromestatus.com/features/6750456638341120 中所述，两个阴影穿透组合器已被弃用那么实现相同目标的替代品是什么，或者这个阴影穿透功能已被完全放弃？

【问题讨论】：

要替换 ::shadow 和 deep 现在可以使用，请在影子根中使用 style 元素，例如 @import url( '/common-style.css' )。见***.com/questions/34699350/… 和***.com/questions/30829019/… 长期解决方案是CSS Custom Properties (aka “CSS variables”)。

【参考方案1】：

::shadow 和 /deep/ 因破坏封装而被移除。

替代品是：

CSS 变量。 它已经与最近推出的 Google Chrome 49 原生兼容。请在此处阅读：

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html

:host-context。在这里阅读：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

【讨论】：

对于在渲染之前无法访问shadow dom的情况，无法避免::shadow

@MarcG 如果没有打破封装的机制，我该如何覆盖框架样式？

我不同意“问题是::shadow 和/deep/ 破坏了封装。我很高兴它们消失了。”。尽管它们破坏了封装，但如果您使用 3rd 方组件并且它们没有 css 变量来按您想要的方式设置样式，那么您很简单，没有选项，除了要求他们创建您想要的变量（永远无法创建），或者，如果支持 /deep/，您可以应用一些微不足道的 css，而不得不分叉组件并自己维护它。我宁愿永远不必使用/deep/，但我希望能够在需要时使用它。

@MarcG 是的，它们破坏了封装，并且尽可能应该避免这种事情。我明白你的意思，我部分同意，但我不同意删除/deep/ 是件好事。在理想的世界中，每个库都将提供每个预期的 css 变量，以便不必要地使用诸如 /deep/ 之类的技巧。不幸的是，他们是资源和时间有限的人，并且预计他们的组件将具有 css 属性，由于影子 DOM，消费者无法通过 css 覆盖这些属性。使用/deep/ 可以大大缓解此类问题。

刚刚遇到第三方自动完成输入在我的元素后面显示它的自动完成建议的情况。应该是一个简单的修复，只是一个 z-index。但是，解决这个问题很痛苦。我终于偶然发现了 /deep/ ，但我发现它已经被贬值了。我不明白当它被完全删除后你将如何解决这个问题。我认为我们仍然需要这样的功能，但覆盖需要显式而不是隐式。

【参考方案2】：

截至聚合物 2：

::shadow（穿透阴影的选择器） - 没有直接替代品。相反，必须使用自定义 CSS 属性。 Polymer 2: Custom CSS Properties

/deep/ - 通过定义:host > * ... 进行某种替换（将规则集应用于主机影子树中的所有***子级，这与主目录中的规则不冲突文档）。

更多详情请查看Polymer 2 Upgrade Notes

【参考方案3】：

在撰写本文时，您可以尝试使用 Chrome 73 及更高版本的 ::part 和 ::theme：

https://www.chromestatus.com/feature/5763933658939392

<submit-form>
  #shadow-root
  <x-form exportparts="some-input, some-box">
    #shadow-root
    <x-bar exportparts="some-input, some-box">
      #shadow-root
      <x-foo part="some-input, some-box"></x-foo>
    </x-bar>
  </x-form>
</submit-form>

<x-form></x-form>
<x-bar></x-bar>

您可以使用以下方式设置所有输入的样式：

:root::part(some-input)  ... 

有完整的文档说明它是如何工作的：

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md

这在某种程度上可以解决您的问题，但我仍然怀念使用 ::shadow 为嵌入式推文设置样式的日子。

【参考方案4】：

"::v-deep" 对我有用。例如：

    .menu 
        // stuff
    
    /deep/.sub-menu      // override submenu
        .sub-menu__mini 
                //stuff
            
            a, a:hover 
                //stuff
            
        
    

变成：

    .menu 
        // stuff
    
    ::v-deep .sub-menu      // override submenu
        .sub-menu__mini 
                //stuff
            
            a, a:hover 
                //stuff
            
        
    

【讨论】：

这是 Vue 特有的。 Angular 中的等价物是 ::ng-deep