CODEWITHSUNDEEP
javascriptpolymer-2.x
paolob
paolob

Reputation: 21

Polymer 2.x - Shadow DOM - <slot>

I'm trying to use the slot API in this example:

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

where tabs-s is the component that wraps other components.Inside it I'm using the tag to render its dom but if I want the assigned nodes I also get the whitespaces (text nodes).

Is there a manner to avoid getting the text nodes when calling assignedNodes() method? This was not happening in Polymer 1.x

Thanks

Upvotes: 2

Views: 431

Answers (1)

JoelCode
JoelCode

Reputation: 336

Let say you want to create a featured section to present new items
the section needs to have some basic information and change colors.

The element will take the title, count and class from his parent

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

Inside the element 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>

But who is in charge of the class detail? The element itself 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>

Upvotes: 1

Related Questions