Chrome Version       : v54 tested

URLs (if applicable) : http://comp.paperplane.io
The url specifically made to show bug.

You can also see source 
http://comp.paperplane.io/comp/card-rating.html
of the component as well via view source.


What steps will reproduce the problem?
(1) Use a HTML5 Web Component - ex: <card-rating id="rat1" stars="2">Mr Robot</card-rating>
Notice I'm setting an attribute as most will: starts=2

(2) Now the HTMl5 Web Component needs to implement attributeChangedCallback(name, oldVal, newVal) method, nothing more.

(3) Fails at runtime, does not work (complains that shadowRoot does not exists)

What is the expected result?
shadowRoot exists at attributeChangedCallback so I can use it, fires ahead of connectedCallback.

What happens instead?
shadowRoot does not exists at attributeChangedCallback.
This is needed to be able to set it inline as I show in step 1 - people set attributes.
so connectedCallback needs to fire ahead of it.

Please provide any additional information below. Attach a screenshot if
possible:
Also I have a sad work around via setTimeout to fix the order of events.
I recommend you take view source of both pages - the page using the component and the page that is the component to run locally so you can reproduce the bug.
Main part to understand is that I'm 'solving it' in attributeChangedCallback(name, oldVal, newVal) by doing setTimeout to delay it after connectedCallback.

So to get the bug comment out my   setTimeout(function(){ 
It says next to it Chrome bug in comments.

Let me know if you need more, but you have full source.