Issue
I have a simple: <content select=""></content> which is pretty straight forward. The item that will be passed into it will be essentially a set of divs with the class page so, ideally, what i want to do is to have the content set to the first .page
How does do i get the selector to work? What are the restrictions?
I read that it only will select the child passed in, which is perfectly fine, but is there limitations as to what i can select?
I am working on building out some samples:
<dom-module id="my-book">
<h2 id="header">{{title}}</h2>
<div id="content">
<content select=".page:first-child"></content>
</div>
<div id="footer">
<div id="back">Back</div>
<div id="next">Next</div>
</div>
</dom-module>
and then i would implement something such as:
<my-book>
<div class="page">
Page 1
</div>
<div class="page">
Page 2
</div>
<div class="page">
Page 3
</div>
<div class="page">
Page 4
</div>
</my-book>
Since it limits only to the children of the element, i wasnt sure if i would be able to use any sort of filtering on it, such as my example of: .page:first-child or if there was a particular subset i was allowed to use for this selector string.
Solution
The select tag is a selector, but can only look at the children of the component.
It will not select any deeper than the children, so it will not return successful results of things like:
<div class="page">
<div class="page"></div>
</div>
The purpose is really, just to organize the children of the Component in however fashion which is dictated by the definition.
By default, you should in this case, set the default to :nth-child(1), or :first-child, or :first.
then the Back and Next would just shift between the other divs. Ideally, just to keep the format, I would use nth-child and then pass in which ever child you want when the Next/Back event fire instead of having custom stuff for first, etc.
Answered By – Fallenreaper
Answer Checked By – Katrina (FlutterFixes Volunteer)