The bad news is that I have a weird message popping up in some chapter projects from Patterns in Polymer. The good news is that I finally have the project code for every single chapter in under test (Dart and JavaScript). Some chapters have better test coverage than others, but coverage, once established, will only improve.
But what good is having tests if the underlying code is producing warnings?
This may be specific to Polymer.dart—I have not seen it in any of the JavaScript elements. But still, if I have a choice between no warning and some warnings, I will opt for the former.
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
unresolved to my element in the containing page: <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
unresolved attribute on the <hello-you> tag or the containing <div> tag: <div class="container" unresolved>
<hello-you>
<p>Introduce yourself for an amazing personalized experience!</p>
</hello-you>
</div>unresolved attribute on the page <body> tag: <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.Day #199
No comments:
Post a Comment