Web 什么'；s是：：shadow和/deep/的替代品？

如
中所述，这两个阴影穿透组合器已被弃用，那么实现相同效果的替代品是什么，或者此阴影穿透功能已被完全放弃？

：：阴影

和

/deep/

因破坏封装而被删除

替代品是：

• CSS变量。 它已经与最近发布的谷歌Chrome49在本地运行。请看这里：

• ：主机上下文

  。请看这里：

从聚合物2开始：

• ：：阴影

  （阴影穿透选择器）-没有直接替代。相反，必须使用自定义CSS属性

• /deep/

  -通过定义

  ：host>*{…}

  （将规则集应用于主机阴影树中的所有顶级子级，这与主文档中的规则不冲突）可以进行某种替换

---

如需了解更多详细信息，请在撰写本文时，使用Chrome73或更高版本，尝试使用

：part

和

：：theme

：

#影子根
#影子根
#影子根

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

：根：：部分（某些输入）{…}

以下是其工作原理的完整文档：

这可以解决你的问题，但我仍然怀念那些日子，我是如何用

：：shadow

“：：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

，请在shadow根目录中使用

style

元素，类似于

@import url（'/common style.css'）

。请参阅，长期的解决方案是。对于无法在呈现阴影dom之前访问阴影dom的情况，是无法避免的：

：shadow

@MarcG如果没有破坏封装的机制，我如何覆盖框架样式？我不同意“问题是，

：：shadow

和

/deep/

破坏了封装。我很高兴它们消失了。”。虽然它们破坏了封装，但如果您使用第三方组件，并且它们没有css变量来按照您想要的方式进行样式设置，那么除了要求它们创建您想要的变量（这是永远无法创建的）之外，您没有其他选项，或者仅仅因为支持

/deep/

的情况下可以应用一些琐碎的css而不得不分叉组件并自己维护它。我宁愿永远不必使用

/deep/

，但我希望能够在需要时使用它。@MarcG是的，它们破坏了封装，只要可能，就应该避免这样的事情。我明白你的观点，我部分同意，但我不同意删除

/deep/

是件好事。在理想的世界中，每个库都会提供每个预期的css变量，以便不必使用

/deep/

等黑客。不幸的是，他们是资源和时间有限的人，这是意料之中的他们的组件将具有css属性，由于阴影DOM，消费者无法通过css覆盖这些属性。使用

/deep/

，这些问题将大大缓解。刚刚有一个情况，第三方自动完成输入在我的元素后面显示了它的自动完成建议。应该是一个简单的修复，只是一个z索引。B但不，修复起来很痛苦。我最终偶然发现了/deep/，它可以工作，但我看到它被贬低了。我不知道当它被完全删除后，你会如何修复这个问题。我认为我们仍然需要这样的功能，但覆盖需要显式而不是隐式。这是特定于Vue的。在Angular中的等效功能是

：：ng deep