如何使用Polymer中的內容元素？

來自documentation它表示<content>元素支持select屬性，該屬性通過簡單的選擇器過濾節點。如何使用Polymer中的內容元素？

所以，針對某個內容元素的light dom元素應該包含一個css類標籤/標籤/值，它允許瀏覽器將其映射到具有該css標籤/標籤/值的相應內容元素select屬性？是否包含輕的dom元素而沒有將此類標籤映射到<content>元素而沒有select屬性？列舉可能性的例子將非常有用。

來源

2016-09-22 Ole

''已棄用''，但您可能會發現[本問答]（http://stackoverflow.com/questions/27622605/what-is-the-content-pseudo-element-and如何工作）有幫助。披露：我已經回答了這個問題。 – TylerH

顯然聚合物仍然使用內容http://stackoverflow.com/questions/39600464/is-the-content-element-used-in-polymer-1-0 – Ole

所以我們有這個關於DOM Distribution小描述：

以支撐元件的光DOM的組成與當地DOM，聚合物支持<content>元素。 <content>元素提供了一個插入點，元素的光DOM與其本地DOM組合在一起。 <content>元素支持通過簡單的選擇器過濾節點的select屬性。

在影子DOM中，瀏覽器維護獨立的光線DOM和陰影DOM樹，並創建用於渲染目的的合併視圖（合成樹）。

在陰暗的DOM中，Polymer維護自己的光DOM和陰影DOM樹。該文檔的DOM樹實際上是組成的樹。

這不是太多，如果有人想了解什麼可以<content>元素做一個小細節，讓工作的例子可能是紙質工具欄元素:)還有比一個簡單的類選擇，多一點這向我們展示的是，選擇是querySelector過濾器：

在HTML中你可以使用紙質工具欄是這樣的：

<paper-toolbar class="tall"> 
    <paper-icon-button icon="menu"></paper-icon-button> 
    <div class="middle title">Middle Title</div> 
    <div class="bottom title">Bottom Title</div> 
</paper-toolbar>

而且模板具有這樣的：

<template> 
    <!-- style ---> 

    <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]"> 
     <content select=":not(.middle):not(.bottom)"></content> 
    </div> 

    <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]"> 
     <content select=".middle"></content> 
    </div> 

    <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]"> 
     <content select=".bottom"></content> 
    </div> 
</template>

因此，您可以看到您可以使用CSS選擇器過濾內容「插槽」，而沒有選擇的內容應該包含所有子項內容。

在JavaScript中您還可以通過兩種方式訪問<content>插槽內容;您可以從包含內容的容器元素中獲取子元素，並且您可以使用this.getContentChildren('#content_id')，這將爲您提供元素Array。

聚合物具有更詳細的API與<content>工作，並在其網站上說明：

https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

UPDATE

從2.0 <content>將<slot>和1.7它們加入用於預遷移的槽元素，您應該使用它。這是比內容元素選擇有點不同，你只能設置一個name屬性外，你必須使用該名稱來指定要哪個插槽放置在：

<template> 
    <!-- style --> 
    <paper-toolbar> 
     <slot name="header"></slot> 
    </paper-toolbar> 
    <slot name="content"></slot> 
</template> 

<my-element> 
    <div class="title" slot="header">title</div> 
    <div slot="content">content</div> 
</my-element>

可悲的是插槽並沒有得到所有指定的開槽元素只有DOM中的第一個元素，所以我們必須重新設計一些使用css選擇器的元素。

來源

2016-09-23 05:51:02 adaliszk

請幫我這個https://stackoverflow.com/questions/44566067 /數據綁定父間 - 子功能於polymer1-0/44568308＃44568308 –

如何使用Polymer中的內容元素？

回答

相關問題