Polymer 聚合物2.x插槽内的造型元素

我已经创建了一个包含插槽的聚合元素。每个插槽都将被替换/填充为带有子元素的HTML元素，而不仅仅是纯文本。如何在插槽内部设置元素样式，而不仅仅是插槽顶层的元素样式？或者，在插槽中使用具有子元素的元素是错误的吗

例如：

模板文件：

<dom-module id="my-element">
  <template>
    <style>
      .class-1 {
        /* Styles here works! */
      }
      .class-1 ::slotted(ul) {
        /* Styles here works! */
      }
      .class-1 ::slotted(ul) a {
        /* Styles here doesn't work */
      }
    </style>
    <div class="class-1">
      <slot name="s1"></slot>
    </div>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
    }
    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

<my-element>
  <ul slot="s1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</my-element>

.一级{
/*这里的风格很管用*/
}
.1级：开槽（ul）{
/*这里的风格很管用*/
}
.1级：：开槽（ul）a{
/*这里的样式不起作用*/
}
类MyElement扩展了Polymer.Element{
静态get是（）{return'my element'；}
}
window.customElements.define（MyElement.is，MyElement）；

HTML文件：

<dom-module id="my-element">
  <template>
    <style>
      .class-1 {
        /* Styles here works! */
      }
      .class-1 ::slotted(ul) {
        /* Styles here works! */
      }
      .class-1 ::slotted(ul) a {
        /* Styles here doesn't work */
      }
    </style>
    <div class="class-1">
      <slot name="s1"></slot>
    </div>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
    }
    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

<my-element>
  <ul slot="s1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</my-element>

---

谢谢你的帮助

试试这个，但它似乎在我的元素的所有实例中都有效

<my-element><style>li a {color:#333}</style>
  <ul slot="s1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</my-element>

li a{color:#333}

Slotted不允许使用子选择器。也就是说

.class-1 ::slotted(ul) a

---

因为“a”是一个子选择，所以无法工作。

您只能使用

：：slotting（）

来设置顶级节点的样式。这就是为什么它适用于

ul

，但不适用于更深层次的元素。阅读了解更多详细信息。感谢您的回复，那么我认为使用包含子元素的HTML作为插槽内容不是一个好主意。首选的方法是从外部设置light DOM的样式。不鼓励对注入的HTML进行额外的样式设置，因为这会增加组件之间的依赖关系。@alesc:对于今天构建web应用程序的任何人来说都是必读的。