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

Question

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

Answer 1

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

替代品是：

• CSS变量。它已经与最近推出的谷歌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/

Answer 2

从聚合物2开始：

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

有关更多详细信息，请查看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
            }
        }
    }