だから我々は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セレクタで使用されていた要素を再設計する必要があります。
'は' '' の賛成で廃止されましたが、あなたは、[このQ&A](http://stackoverflow.com/questions/27622605/what-is-the-content-pseudo-element-andを見つけることができます-how-does-it-work)に役立ちます。開示:私はその質問に答えました。 –
TylerH
明らかにポリマーはまだ内容を使用しています。http://stackoverflow.com/questions/39600464/is-the-content-element-used-in-polymer-1-0 – Ole