什么是替代：：阴影和/深/？

Question

如https://www.chromestatus.com/features/6750456638341120中所述，这两个穿透阴影的组合器已被否决。

那么，实现同样的目标的替代方法是什么，或者这个穿透阴影的功能已经被完全抛弃了？

Answer 1

将::shadow和/deep/去除，进行断裂包封。

替代品如下：

• CSS变量它已经与最近推出的谷歌Chrome 49进行了本地合作。在这里阅读：
  1. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
  2. https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
  3. http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html

​

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

Answer 2

聚合物2：

• ::shadow (穿透阴影的选择器)-没有直接的替代品。相反，必须使用自定义CSS属性。聚合物2:自定义CSS特性
• /deep/ --通过定义:host > * { ... } (对主机阴影树中的所有顶级子级应用规则集，这与主文档中的规则不冲突)有某种替代。

有关更多详细信息，请查看聚合物2升级说明

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设计嵌入tweets的那些日子。