Polymer Template: What are valid selects for content insertion points

Question

This may be fairly simple question, and though I can find some simple examples, I cannot find documentation on this on the Polymer Project website. In the template for an element, you may use:

<content select="value"></content>

My question is what are valid values for the select attribute. Is it simply an element? Can it be any simple CSS selector (such as "#id")? Can it be a bound value ("{{data}}")?

While, ultimately, I'm just looking for the answer, I would also gladly accept a document citation or URL.

Answer 1

A little bit of documentation on the polymer website is hidden away in the Your first Polymer app section. There is a link to the W3C Shadow DOM specification which says valid selectors for insertion points are:

• A type selector or a universal selector (a, div etc.)
• class selector(s) (e.g. .my-class)
• An ID selector (e.g. #myid)
• attribute selector(s) (e.g. [myboolattr], [myattr="myvalue"])
• A negation pseudo-class, :not()

You could have multiple selectors in the select attribute, for example:

<content select='div,.my-class,#myid,[name="myname"]'></content>

Binding works too:

<content select="{{ mySelector }}"></content>

A * selects everything:

<content select="*"></content>

Answer 2

I found this in one of the tutorials on Polymer website.

Selecting content: The select attribute on a content element accepts a limited set of CSS selectors. You can only select direct children of the host node, not descendents.

More reference.

The matching criteria for an insertion point is a set of compound selectors. These compound selectors are restricted to contain only these simple selectors:

1. A type selector or a universal selector
2. class selector(s)
3. An ID selector
4. attribute selector(s)
5. A negation pseudo-class, :not()