Polymer Nested Scoping

I’ve taken my first dive into Polymer and the uber intriguing Web Components concept. One of the first things I had issues with was availability of custom attributes passed into the component template.

This issue arises when you have nested, or child, templates. In the example below, you’ll notice I’ve several nested templates inside my polymer-element.

Note that in each child template I’m trying to print out {{myvar}}, which is a custom attribute. In the first, it simply doesn’t exist, but we’re golden in the second. Polymer docs have this to say:

If a <template> using a named scope contains child <template>s, all ancestor scopes are visible, up-to and including the first ancestor not using a named scope….

In other words:

  • If a template uses a named scope, its parent scope is visible.
  • If a template uses an unnamed scope, its parent scope is not visible.

See http://www.polymer-project.org/docs/…

For some reason, this just didn’t click for me on the first read through.

A named scope looks like this:

<template bind="{{foo as bar}}">

Where as an un-named looks like:

<template bind="{{foo}}">

In the latter, the scope is limited to foo; no access to any parent scope is allowed. But the above says even more. That scoping is inherited up through the child templates until it hits the first un-named scope, that’s important to remember.

JS Bin