But what good is having tests if the underlying code is producing warnings?
This particular Polymer element is working as far as I can tell. But it still displays the following warning:
Custom element found in document body without an "unresolved" attribute on it or one of its parents. This means your app probably has a flash of unstyled content before it finishes loading. web/index.html:24:7 <hello-you>Flash of unstyled content is a big deal in Polymer. Really, it is a big deal anywhere that styles might get applied after content has already rendered. Unstyled or incompletely styled content on a page looks unprofessional. So I understand why this warning exists.
I can even fix the problem easily—just add
unresolvedto my element in the containing page:
But I do not know why this problem occurs in some of my Polymer elements, but not others. As an aside, I still dig seeing the warning directly in the browser (in development mode).
<div class="container"> <hello-you unresolved> <p>Introduce yourself for an amazing personalized experience!</p> </hello-you> </div>
Eventually, I figure out that this occurs in custom Polymer elements that have distributed nodes. In the above, the
<p>is distributed into the Polymer element's shadow DOM. Once I realize this, I see that it does, in fact, get FOUC'd:
When I first load the page, the distributed content is shown without any styles from the
<hello-you>Polymer element and without being wrapped by the Polymer element. Once Polymer has initialized, this content shifts noticeably into its final location inside the Polymer element. FOUC!
Interestingly, I can resolve the warning by placing the
unresolvedattribute on the
<hello-you>tag or the containing
But even though the warning goes away, the FOUC remains. The only way that I am able to eliminate the FOUC is to place the
<div class="container" unresolved> <hello-you> <p>Introduce yourself for an amazing personalized experience!</p> </hello-you> </div>
unresolvedattribute on the page
<body unresolved> <div class="container"> <hello-you> <p>Introduce yourself for an amazing personalized experience!</p> </hello-you> </div> </body>I am unsure if it is possible to combine the styles for distributed content and unresolved polyfills. That seems like grist for another day. For now, I am just happy to have a handle on this warning.