Question

我创造了一个包含插槽的聚合物元件。每个插槽都要替换/填充带有子元素的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

开槽不允许子选择器。表示

.class-1 ::slotted(ul) a

由于'a'是子选择，因此根本无法工作。

Answer 2

尝试此操作，但它似乎在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>

在Polymer 2.x中插槽内的样式元素

2 个答案: