问题
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.
回答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,divetc.) - 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>
回答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:
- A type selector or a universal selector
- class selector(s)
- An ID selector
- attribute selector(s)
- A negation pseudo-class, :not()
来源：https://stackoverflow.com/questions/28318520/polymer-template-what-are-valid-selects-for-content-insertion-points