Polymer 2.x - Shadow DOM - ‹слот›

Я пытаюсь использовать API слота в этом примере:

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

где tabs-s — это компонент, который обертывает другие компоненты. Внутри него я использую тег для отображения его dom, но если мне нужны назначенные узлы, я также получаю пробелы (текстовые узлы).

Есть ли способ избежать получения текстовых узлов при вызове методаassignNodes()? В Polymer 1.x такого не было.

Спасибо


javascript polymer-2.x
person paolob    schedule 10.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Допустим, вы хотите создать специальный раздел для представления новых элементов
, раздел должен содержать некоторую основную информацию и менять цвета.

Элемент возьмет 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>
person JoelCode    schedule 11.05.2017