Polymer Newsletter - 2013-06-12

[Eric Bidelman]

bcc:polymer-annouce

There's been a lot of updates since the last newsletter! This issue doesn't capture

all of the happens, but it does highlight some big stuff.

Remember: most of these updates are happening in the master (dev) branch. They will soon make their way to stable. As always, we'll update the changelog with the major

changes when the next release happens.

Browser updates:

Blink now supports  relative selectors in the ::distributed() pseudo element. [announcement]. Now you can apply a style to a shadow host's *direct* child, which is distributed into an insertion point, from the shadow tree using a relative selector as follows:

   content::-webkit-distributed(> div) {
       color: blue;
    }

POLYMER

• Repos (in master) no longer include submodules. Instead, they expect to live as siblings with one another (commit).  See polymer-all for the structure moving forward.
• IRC logs are up at http://echelog.com/?polymer
• To increase memory efficiency, Polymer proper is going to support the custom element lifecycle callbacks. Similar to ready(), these can be included on the prorotype given to Polymer.register(). The methods have shorter names in Polymer:         

           spec vs. polymer

            readyCallback: ready

            insertedCallback: inserted

            removedCallback: removed

            attributeChangedCallback: attributeChanged

Bugs squashed

• issue #153 - element templates are stamped into shadowRoot with unbound value. e.g. <img src="http://tpmrpg.net/newertpm/images/pokemon/{{color}}/{{name}}.png"> in a template won't cause a 404 request in the devtools anymore.
• issue 170 - :scope pseudo class is now supported by the polyfill for selecting the host node element. @host {:scope {...}} is mostly the same as @host {*{...}}.
• issue 171 - type extension elements lose styling under polyfill

Custom Elements

• The .constructor property nows references the actual one defined as the attribute (commit)

HTML Imports

• Caching busting on imports was now turned off by default. Enable it for testing using the debug flag. [commit]
• External stylesheets will not work inside of <element>/<template> (commit)

Shadow DOM

• Alias this.webkitShadowRoot -> this.shadowRoot (commit). Fixes issue 165.

Pointer Events

• PointerEvents has split the platform-events.js file into mouse.js, touch.js, and ms.js in the master branch

MDV

Rafael proposed and implemented a default MDV syntax for Polymer that supports expressions, option scoping, etc: You can swap in your own syntax if you want. Read more about it here.

Applying a class:

<div class="{{ className: path.to.value; otherClassName: path.to.other.value }}">

Named scopes:

<template repeat="{{ user in users }}">

-Syntax for repeat: "name in path" 
-Syntax to bind: "path as name" 

Inline expressions COMING SOON:

{{ foo.bar + baz.bat }}, {{ blaz ? 1 : 0 }}, {{ !blarg }}

• HTMLTemplate.prototype.createInstance() now takes a model & syntax.

Eric