Question

如https://www.chromestatus.com/features/6750456638341120中所述，这两个穿孔阴影的组合器已经被弃用了。那么实现同样的东西是什么，或者这个暗影穿透功能已被完全抛弃了？

Answer 1

::shadow和/deep/已被删除以打破封装。

替代品是：

CSS变量。它已经与最近推出的谷歌Chrome 49一起使用。请阅读：
:host-context。请在此处阅读：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

Answer 2

从聚合物2开始：

::shadow（阴影穿刺选择器） - 没有直接的替代品。相反，必须使用自定义CSS属性。 Polymer 2: Custom CSS Properties
/deep/ - 通过定义:host > * { ... }进行某种替换（将规则集应用于主机的影子树中的所有顶级子级，其中没有＃＆＃ 39;与主文件中的规则冲突）。

有关详细信息，请查看Polymer 2 Upgrade Notes

Answer 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设置嵌入式推文样式的日子。

Answer 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
            }
        }
    }

什么是:: shadow和/ deep /的替代品？

4 个答案: