docs: Add FOUC docs to getting started README FAQ (#549) (#742)

bdone · castastrophe · kylebuch8 · web-flow · commit abbbd8f2d33d · 2020-02-19T09:13:56.000-05:00
* docs: Add fouc docs to getting started readme faq (#549) * Update docs/content/getting-started/_index.md Co-Authored-By: [ Cassondra ] <castastrophe@users.noreply.github.com> * Update docs/content/getting-started/_index.md Co-Authored-By: [ Cassondra ] <castastrophe@users.noreply.github.com> * docs: Add fouc docs to getting started readme faq (#549) * docs: Removed body ex from getting started readme faq (#549) Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Co-authored-by: Kyle Buchanan <kylebuch8@gmail.com>
diff --git a/docs/content/getting-started/_index.md b/docs/content/getting-started/_index.md
@@ -63,23 +63,19 @@ Different components have different intended uses. We tend to think of them in 3
 The beauty of web components is that they have much of the styling built-into the tag itself. Start with the tags first.
 
 ```
-<body>
-    <pfe-cta>
-        <a href="#">Learn more</a>
-    </pfe-cta>
-</body>
+<pfe-cta>
+    <a href="#">Learn more</a>
+</pfe-cta>
 ```
 
 
 
 ### Container components (see also container notes below)
 
 ```
-<body>
-    <pfe-card pfe-color="darkest">
-        <p>Hello world.</p>
-    </pfe-card>
-</body>
+<pfe-card pfe-color="darkest">
+    <p>Hello world.</p>
+</pfe-card>
 ```
 
 
@@ -239,3 +235,8 @@ You can optionally customize your broadcast variables individually if you have v
 * `--pfe-broadcasted--link-decoration--focus`
 
 If you include the `pfe-base.css` stylesheet, it will include application of these broadcast variables to links; this is helpful because links are often nested inside of p tags in the content and thus inaccessible to the stylesheet of the web component.
+
+### How to avoid FOUC (Flash of Unstyled Content) with the body unresolved attribute
+
+PatternFly Elements provides a stylesheet that causes the `body[unresolved]` attribute to avoid the Flash of Unstyled Content (FOUC).
+Adding the unresolved attribute to the `body` tag will hide the entire page until all elements have upgraded or 2 seconds have passed, whichever happens first.  By including the `pfelement--noscript.css` file (wrapped in a `noscript` tag), all content will be revealed immediately for pages without JavaScript turned on.  To customize the wait time, update the value of the `--pfe-reveal-delay` variable (default 2 second delay) and the `--pfe-reveal-duration` variable (how long the reveal animation takes, default 0.1618 seconds).
diff --git a/elements/pfe-styles/demo/index.html b/elements/pfe-styles/demo/index.html
@@ -98,7 +98,7 @@
       }
     </style>
   </head>
-  <body>
+  <body unresolved>
 
     <article>
       <header>
diff --git a/elements/pfelement/test/fouc-test.html b/elements/pfelement/test/fouc-test.html
@@ -29,7 +29,7 @@ <h2 slot="pfe-card--header">Card 1</h2>This is pfe-card.
 
         A note about these tests.  PFElements provides a stylesheet that causes
         the body[unresolved] attribute to hide the page.  It's very similar to
-        Polymer's approach.  The Web Component Tester automatically injets
+        Polymer's approach.  The Web Component Tester automatically injects
         Polymer's CSS into this page.  That means that both PFElements' and
         Polymer's CSS is present on this page.  Be cautious of that when
         writing tests.

Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,7 @@`
`98`	`98`	`}`
`99`	`99`	`</style>`
`100`	`100`	`</head>`
`101`		`- <body>`
	`101`	`+ <body unresolved>`
`102`	`102`
`103`	`103`	`<article>`
`104`	`104`	`<header>`