5

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.

Fuzzical Logic
  • 12,947
  • 2
  • 30
  • 58

2 Answers2

9

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>
oliverdm
  • 381
  • 3
  • 10
  • Thanks for accepting. I think I found out about the binding part only through trial and error. A quick search in the Polymer sources yielded no example of this feature being used in any of the elements. So perhaps it is not officially supported (it works quite nicely though). Multiple selector are, however, used in Polymer elements (e.g. `core-scaffold`). – oliverdm Feb 04 '15 at 10:54
3

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()
Justin XL
  • 38,763
  • 7
  • 88
  • 133