如何应用带有阴影 DOM 的父项的伪选择器样式？

Question

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

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

index.html

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

我的-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>

我的导航-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 看起来像这样：

我的-app.html

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

我的导航-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 属性？

Answer 1

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

我的-app.html

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

可能的好处是在 11:40 的 Polymer Summit 演讲中提出的用作 mixins 的原生 CSS 属性2015: "Polymer's Styling System."

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

我的-app.html

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

我的导航-item.html

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

但是等等……还有更多！

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

我的-app.html

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

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

我的导航-item.html

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

如何应用带有阴影 DOM 的父项的伪选择器样式？

How do I apply pseudo-selector styles from a parent with shadow DOM?

html

css

shadow-dom

polymer

但是等等……还有更多！