creating-insertion-points-using-the-select-attribute.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
# Creating Insertion Points using the Select Attribute

Shows use of the `select` attribute with a CSS selector to chose which nodes
get distributed at an insertion point.

A `<content>` tag with no `select` attribute permits the insertion of any type
of distributed node.  Use the `select` attribute to only allow the insertion of
nodes that match a CSS selector.

Consider the following use of `<content>` tags in this snippet:

    <template>
      <content select="h2"></content>
      <content select=".crucial"></content>
      <content select="child-el"></content>
      <content></content>
    </template>

The first `<content>` allows insertion of only `<h2>` elements. The second
`<content>` allows insertion of any element with a class attribute of
'crucial'. The third `<content>` allows insertion of another Polymer
element, `<child-el>`. The `<content>` tag without a `select` inserts the
`<p>A distributed node</p>` node.

You can use `<my-element>` like this:

    <my-element>
      <p>A distributed node</p>
      <p class="crucial">An important para</p>
      <h2>A headline</h2>
      <child-el></child-el>
    </my-element>

This generates the following composed tree:

      <h2>A headline</h2>
      <p class="crucial">An important para</p>
      <child-el></child-el>
      <p>A distributed node</p>

Note that the order of the rendered nodes in the composed tree is determined
by the order of the `<content>` tags in the _element definition_, not the order
in which the child nodes are passed to the element.

Read about the
[CSS selectors that you can use with the `select` tag](http://w3c.github.io/webcomponents/spec/shadow/#satisfying-matching-criteria).

[jsbin](http://jsbin.com/vumum/edit)
-->

<link rel="import" href="../../components/polymer/polymer.html">

<polymer-element name="child-el" noscript>
  <template>
    <p>Inside child-el</p>
  </template>
</polymer-element>

<polymer-element name="my-element" noscript>
  <template>
    <content select="h2"></content>
    <content select=".crucial"></content>
    <content select="child-el"></content>
    <content></content>
  </template>
</polymer-element>