Polymerのcontent要素の使い方は？

Question

documentationから、<content>要素は単純なセレクタを介してノードをフィルタリングする属性をサポートしています。

特定のコンテンツ要素をターゲットとするlight dom要素には、CSSタグ/ラベル/値が設定されている対応するコンテンツ要素にブラウザがマップできるようにするCSSクラスラベル/タグ/値が含まれている必要がありますselect属性？そのようなラベルがない<content>要素にマップされたlight dom要素には、select属性が含まれていませんか？可能性を列挙する例が非常に役立つだろう。

Answer 1

だから我々はDOM Distributionについては、この少し説明があります。その地域のDOMで要素の光DOMの構成をサポートするために

を、ポリマーは<content>要素をサポートしています。 <content>要素は、要素の軽いDOMがそのローカルDOMと結合される挿入点を提供します。 <content>要素は、単純なセレクタを介してノードをフィルタするselect属性をサポートしています。

DOMでは、ブラウザはDOMツリーとシャドーDOMツリーを別々に管理し、レンダリングの目的でマージされたビュー（作成されたツリー）を作成します。

DOMでは、Polymerは独自の軽いDOMと陰影のDOMツリーを維持します。ドキュメントのDOMツリーは、効果的に構成されたツリーです。

これには、実施例は、紙、ツールバーの要素かもしれない、誰かが<content>要素は何ができるかについて少し詳細をしたい場合も過言ではない:)を選択し、単純なクラスよりも少しはあり、その

あなたは、このような紙のツールバーを使用することができます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> 

そしてテンプレートは、これを持っている：

選択がquerySelectorフィルタであることを私たちに示しています

コンテンツ "スロット"をCSSセレクタでフィルタリングでき、選択なしのコンテンツにすべての子コンテンツが含まれていることがわかります。

JavaScriptでは、<content>スロットのコンテンツを2通りにアクセスすることもできます。内容を持つコンテナ要素から子を取得することができ、this.getContentChildren('#content_id')を使用すると、要素Arrayが得られます。

ポリマーは<content>で動作するように、より詳細なAPIを持ち、自分のサイトの説明：2.0 <content>から

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

UPDATE

は<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セレクタで使用されていた要素を再設計する必要があります。