Html 如何从具有阴影DOM的父级应用伪选择器样式？_Html_Css_Polymer_Shadow Dom

Html 如何从具有阴影DOM的父级应用伪选择器样式？

html css polymer

Html 如何从具有阴影DOM的父级应用伪选择器样式？,html,css,polymer,shadow-dom,Html,Css,Polymer,Shadow Dom,我基本上是在尝试复制导航栏的行为，当整个导航栏的任何部分悬停时，项目标签的动画从左侧飞入。我正在尝试使用Web组件和聚合物来实现这一点我的HTML结构（大致）如下： index.html  <body> <my-app></my-app> </body> <dom-module id="my-app"> <nav> <my-nav-i

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

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

index.html

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

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

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

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

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;
}

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

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

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

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

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

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

my nav item.html

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

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

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

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

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;
}

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

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

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

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

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

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

span

按预期启动屏幕，当我使用

a:hover span

和

transform:translateX（0）

时，它可以很好地处理从左侧飞入的文本。然而，我希望当

nav

的任何部分悬停在上方时，所有标签都从左侧飞入，就像“网站”一样

如何设置

nav:hover my nav item span

transform

属性而不中断关注点的分离？

我最终用

：：shadow/deep/

解决了问题（不情愿）：

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

好的方面可能是一些与聚合物峰会2015年11:40演讲中提出的用作混合物的原生CSS属性类似的东西：

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

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

my nav item.html

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

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

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

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

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;
}

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

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

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

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

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

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

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

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

my nav item.html

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

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

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

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

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;
}

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

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

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

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

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

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

我最后（不情愿地）用

：：shadow/deep/

解决了这个问题：

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

好的方面可能是一些与聚合物峰会2015年11:40演讲中提出的用作混合物的原生CSS属性类似的东西：

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

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

my nav item.html

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

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

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

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

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;
}

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

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

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

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

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

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

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

my app.html

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

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

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

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

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;
}

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

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

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

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

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

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

my nav item.html

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

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

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

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

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;
}

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

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

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

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

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

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

您能否提供一个代码笔或其他东西作为问题的最小示例？由于问题示例代码中甚至不存在

span

，因此很难理解标记结构。请在问题中添加一个工作代码段，否则任何尝试都将是猜测（猜测很好！）Codepen似乎不支持自定义元素。你知道另一个游乐场/沙箱网站支持它们吗？Codepen对我有用…@LGSon-根据规范，它没有使用

dom模块

或HTML导入。你能提供一个Codepen或其他东西作为问题的一个最小示例吗？因为

span

甚至不存在于你的问题示例代码中，所以很难理解标记结构。请在问题中添加一个工作代码段，否则任何尝试都将是猜测（猜测很好！）Codepen似乎不支持自定义元素。你知道另一个游乐场/沙箱网站支持它们吗？Codepen适合我…@LGSon-根据规范，它不使用

dom模块

或HTML导入。