Question

我正在尝试使用此示例中的插槽API：

<tabs-s>
  <tab-c>
  <tab-c>
</tabs>

其中tabs-s是包装其他组件的组件。在其中我使用标签来呈现它的dom但是如果我想要分配的节点我也得到空白（文本节点）。

有没有办法避免在调用assignedNodes（）方法时获取文本节点？这在Polymer 1.x

中没有发生

谢谢

Answer 1

假设您要创建一个特色部分来展示新项目该部分需要有一些基本信息并改变颜色。

该元素将从其父级

获取title，count和class

<featured-section class="blue">
  <span slot="count">3</span>
  <h1 slot="title">The title of the element go here</h1>
</featured-section>

元素featured-section

内

<dom-module id="featured-section">
  <template>
    <section>
      <div class="vertical-section-container">
        <div class="circle-container">
          <div class="circle">
            <slot name="count"></slot>
          </div>
        </div>

        <slot name="title"></slot>

        <feature-box></feature-box>
        <feature-grid></feature-grid>
      </div>
    </section>
  </template>

但谁负责班级细节？元素本身featured-section

<custom-style>
  <style include="shared-styles">
    :host {
      display: block;
      background-color: var(--my-section-color);
    }

    :host(.blue) {
      --my-section-color: #03A9F4;
    }

    :host(.green) {
      --my-section-color: #8BC34A;
    }

    :host(.pink) {
      --my-section-color: #FF6EB6;
    }

    ::slotted(h1) {
      color: #fff;
      padding-bottom: 1.5em;
      line-height: 48px;
    }

  </style>
</custom-style>

Polymer 2.x - Shadow DOM - <slot>

1 个答案: