Polymer template: what are the valid checkboxes for content entry points

Question

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

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

My question is what are valid values ​​for the select attribute. Is this just an element? Could there be any simple CSS selector (like "#id" )? Could this be a related value ( "{{data}}" )?

So far, ultimately, I'm just looking for an answer, I am also happy to accept the citation or URL of the document.

Answer 1

A little documentation on the polymer website is hidden in in your first "Polymer" section . There is a link to the W3C Shadow DOM specification , which says that valid selectors for insertion points are:

• Type selector or universal selector ( a , div , etc.)
• class selector (e.g. .my-class )
• ID selector (e.g. #myid )
• attribute selector (for example, [myboolattr] , [myattr="myvalue"] )
• Negative pseudo-class :: not ()

There can be several selectors in the select attribute, for example:

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

Linking too:

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

A * selects everything:

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

Answer 2

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

Content selection: The select attribute in a content element accepts a limited set of CSS selectors. You can only select direct children from the host node, not descendants.

Details link .

Matching criteria for the insertion point is a collection of compound selectors. These compound selectors are limited to only these simple selectors:

• Type selector or universal selector
• Class selector (s)
• ID selector
• attribute selector
• Negative pseudo-class :: not ()