如何从具有影子 DOM 的父级应用伪选择器样式？答案

【问题标题】：How do I apply pseudo-selector styles from a parent with shadow DOM?如何从具有影子 DOM 的父级应用伪选择器样式？
【发布时间】：2017-04-27 18:49:18
【问题描述】：

我基本上是在尝试复制CSS Tricks 导航栏的行为，当整个栏的任何部分悬停在上方时，项目标签的动画会从左侧飞入。我正在尝试使用 Web Components 和 Polymer 来做到这一点。

我的 HTML 结构（大致）如下：

index.html

<!-- ... head stuff ... -->
<body>
  <my-app></my-app>
</body>

my-app.html

<dom-module id="my-app">
  <nav>
    <my-nav-item url="/"
                 text="Home"
                 icon="home.svg#nav-icon-home"></my-nav-item>
  </nav>
</dom-module>

my-nav-item.html

<dom-module id="my-nav-item">
  <a href$="[[url]]">
    <svg height="20px" width="20px" viewBox="0 0 20 20">
      <use href$="[[icon]]"></use>
    </svg>
    <span>[[text]]</span>
  </a>
</dom-module>

CSS 看起来像这样：

my-app.html

nav {
  width: 75px;
  height: calc(100% - 60px);
  background: #222d32;
}

my-nav-item.html

a {
  display: block;
  text-decoration: none;
  color: white;
  margin: 25px auto;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px;
}

svg {
  fill: white;
  margin: 0 auto;
}

span {
  display: block;
  margin: 10px auto;
  transform: translateX(-200px);
  transition: 0.1s;
}

span 按预期在屏幕外启动，当我将a:hover span 与transform: translateX(0) 一起使用时，它与从左侧飞入的文本完美配合。但是，当nav 的任何部分悬停在上方时，我希望所有标签都从左侧飞入，就像CSS Tricks' 网站一样。

如何在不破坏关注点分离的情况下设置 nav:hover my-nav-item span transform 属性？

【问题讨论】：

您能否提供一个代码笔或其他东西作为该问题的最小示例？
由于span 甚至不存在于您的问题示例代码中，因此很难理解标记结构。请在问题中添加一个工作代码 sn-p 否则任何尝试都是猜测
猜猜很棒！ :) Codepen 似乎不支持自定义元素。你知道另一个支持它们的游乐场/沙盒网站吗？
Codepen 为我工作...codepen.io/anon/pen/XRpvmJ
@LGSon - 根据Web Components 规范，这不使用dom-module 或HTML 导入。

标签： html css polymer shadow-dom

【解决方案1】：

我最终（不情愿地）用::shadow /deep/ 解决了这个问题：

my-app.html

nav:hover worf-nav-item::shadow /deep/ span {
  transform: translateX(0);
}

可能的好处是类似于 2015 年 Polymer 峰会 11:40 演讲中提议的用作 mixin 的原生 CSS 属性："Polymer's Styling System."

我可能会提出这样的建议：

my-app.html

nav:hover {
  --transform-no-translate-x: {
    transform: translateX(0);
  }
}

my-nav-item.html

span {
  @apply(--transform-no-translate-x);
}

但是等等……还有更多！

实际上，我在写这篇文章时一直在玩它，并想出了另一个解决方案。我更喜欢这个。

my-app.html

nav {
  --nav-transform: translateX(-200px);
}

nav:hover {
  --nav-transform: translateX(0);
}

my-nav-item.html

span {
  transform: var(--nav-transform);
}

【讨论】：