wrong layout information on attached

[valdrinkoshi]

• <demo-snippet> has a shadow root and stamps the distributed <template> after being attached
• <custom-element> calculates its bounding rect when attached

The bounding rect is 0s when <custom-element> gets stamped by <demo-snippet> http://jsbin.com/kinuyif/1/edit?html,console,output (try on Firefox)

Notice that this.isConnected = true while document.body.contains(this) = false, which is an inconsistent state.

This gets solved by ShadyDom.flush(), but that's not viable as we don't know if this should be done by <demo-snippet> or <custom-element>. Also, in Polymer 1.x this was not the case (compare output with Polymer 2.x)

ShadyDOM should at least guarantee a consistent state where this.isConnected === document.body.contains(this).

A possible solution could be to patch all methods/properties that trigger reflow/layout and ShadyDOM.flush() in there when needed https://gist.github.com/paulirish/5d52fb081b3570c81e3a - similar approach proposed for focus in https://github.com/webcomponents/shadydom/issues/46

This is an issue for iron-fit-behavior which has to check if document.body.contains(this)
https://github.com/PolymerElements/iron-fit-behavior/pull/64/files/e599ddeff3002bb23816b8649ad593ddb55acacf#r110974901

@sorvell WDYT?