polymer - Polymer 2.x 中槽内的样式元素

Question

我创建了一个包含插槽的 polymer 元件。每个槽都旨在用带有子元素的 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>

HTML 文件:

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

感谢您的帮助!

Answer 1

Slotted 不允许使用子选择器。这意味着

.class-1 ::slotted(ul) a

根本无法工作，因为“a”是子选择。