聚合物2.X - 陰影DOM - <slot>

我試圖使用時隙API在該實施例中：聚合物2.X - 陰影DOM - <slot>

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

其中突片-S是一個封裝其它components.Inside它我使用的部件該標籤呈現它的dom，但如果我想分配的節點，我也得到空格（文本節點）。

有沒有辦法避免在調用assignedNodes（）方法時獲取文本節點？這是不是在聚合物1.x中發生

感謝

來源

2017-05-10 paolob

比方說您想創建一個有特色的部分，提出新的項目
部分需要有一些基本的信息，並改變顏色。

元素會從他的父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>

來源

2017-05-11 00:19:54

聚合物2.X - 陰影DOM - <slot>

回答

相關問題