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

Question

如https://www.chromestatus.com/features/6750456638341120
所述，两个shadow-piercing combinators已经被弃用，那么用什么替代来实现同样的事情，或者这个shadow-piercing特性已经被完全放弃了？

Answer 1

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

替补是：

CSS 个变量。它已经在最近推出的 Google 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 > * { ... } 进行某种替换（将规则集应用于主机的影子树中的所有顶级子级，这不会' t与主文档中的规则冲突）。

更多详细信息请查看Polymer 2 Upgrade Notes

Answer 3

在撰写本文时，您可以尝试 ::part 和 ::theme 以及 Chrome 73 及以上：

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/ 的替代品是什么？

What's the substitute for ::shadow and /deep/?

web-component

web

shadow-dom