javascript - Polymer 2.x - 影子 DOM -

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>