Can you use something like :last-of-type in content selectors?

[Eric Eslinger]

What I want to actually accomplish is something like "if this content isn't provided, use this default value instead". My thinking was that I could create an element that had <div thing>Default for Thing<div> in it, and in an enclosing webcomponent do a template that looked like

<content select="[thing]:last-of-type"></content>

to pick the default for thing if another <div thing> hadn't been put in earlier in the same level of the DOM. (the light DOM is being manipulated outside of polymer, so in some app states I'll want <div thing>foo</div> and in some I'll want just the default. I *could* swap the thing div in and out with some variable, but this defaulting thing seems clever.

So specifically, if I had <my-component><div thing>foo</div><div thing>bar</div></my-component> I want to do a content selector that picks the last thing and just uses that- <div thing>bar</div> rendered out.

[Elliott Sprehn]

This was originally in the spec, but got removed. It's how <details> works, it creates a <content select="summary:first-of-type">.

We should probably revisit allowing deeper hooks into distribution. Given the talk of using separate scripting contexts for custom style, layout and paint callbacks we can probably let you run code in the distribution process now too.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CABsi40Je15XEqAYyjdKLDYie49kVhJcJ4v0CJbp2nBQaK5huSA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Eric Eslinger]

Hmm, interesting.

Right now, I'm using Polymer to handle the main layout work for a SPA. It's mostly core- and paper-components, but I wrote an overall-scaffold with the appropriate drawers for navigation and submenu, some topline stuff, and so forth.

The actual content for each page in the SPA gets generated by angular, but it's pretty neat. The angular template for the route has stuff like <div topline> and <div topline-small> (for phones) and <div menu-content> in it, and that just gets selected and sorted into the appropriate places on the screen by the overall polymer scaffold.

The only thing I can't seem to do here is generate a default value- "if there's nothing selected by [topline], just use this search box instead of nothing". So for now, I just have to define all the page contents no matter what.

As I write this, I realize I could be doing something with <template if> probably, but that wouldn't actually work with my code- the only way I can get angular to do it's thing right now is to have all the angularized stuff be on the Light DOM. Which means I can't define defaults in the <template> code, unless those defaults don't interact with angular (and they do). That's why I was thinking of a set of defaults defined at the top of the view hierarchy, then angular injects nodes into the heirarchy which override those defaults, and polymer presents the most-recently-added node in the list.

This is 80% me thinking out loud, and 20% me thinking, "hey maybe they're interested in hearing how we use polymer".

e

On Tue, Feb 24, 2015 at 11:23 PM Elliott Sprehn <esp...@gmail.com> wrote:

This was originally in the spec, but got removed. It's how <details> works, it creates a <content select="summary:first-of-type">.

We should probably revisit allowing deeper hooks into distribution. Given the talk of using separate scripting contexts for custom style, layout and paint callbacks we can probably let you run code in the distribution process now too.

On Tue, Feb 24, 2015 at 5:15 PM, Eric Eslinger <eric.e...@gmail.com> wrote:

What I want to actually accomplish is something like "if this content isn't provided, use this default value instead". My thinking was that I could create an element that had <div thing>Default for Thing<div> in it, and in an enclosing webcomponent do a template that looked like

<content select="[thing]:last-of-type"></content>

to pick the default for thing if another <div thing> hadn't been put in earlier in the same level of the DOM. (the light DOM is being manipulated outside of polymer, so in some app states I'll want <div thing>foo</div> and in some I'll want just the default. I *could* swap the thing div in and out with some variable, but this defaulting thing seems clever.

So specifically, if I had <my-component><div thing>foo</div><div thing>bar</div></my-component> I want to do a content selector that picks the last thing and just uses that- <div thing>bar</div> rendered out.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

[Elliott Sprehn]

You can put children under a <content> and they'll render if the content select doesn't actually match anything. Does that do what you want? I think you can even nest content elements to select different content for fallback scenarios (at least the spec did allow that once).