wcc lift component level CSS to `<head>` for documentation site

Type of Change

Documentation / Website

Summary

Now that patterns for non Declarative Shadow DOM based rendering are emerging within the project via #49 and innerHTML is an option, it would probably be better for the documentation site if the component level <style> tags were lifted to the <head> of the document.

Details

The main goal here would be to help alleviate in instances of FOUC since each of those inline <style> tags is likely going to be render blocking.

Jun 08 '22 19:06 thescientist13

can i be assigned this issue?

Jun 09 '22 13:06 ajukadavid

Sure, that would be great. Basically I'm hoping that moving this CSS higher up will make this header flashing go away, so I think if you can start with Header and Navigation component styles to see if that helps would be great. https://user-images.githubusercontent.com/895923/172904288-2975e594-3c8d-4930-9a6c-a7472a595d11.mov

For example, if I got to 11ty.dev and refresh and refresh, it doesn't jump or flash or anything. It could also just be a CSS issue it self because of my bad styles 😅 but figured lifting the inline <style> tags would be a good first start. Not sure if external styles contribute to this or not as well?

Any work / testing here would definitely be helpful though! 👍

Jun 09 '22 17:06 thescientist13

Also, if you have any thoughts on a better way to do this, I have #33 as to explore more ergonomic and standards compliant / adjacent solutions as well.

For example, for our docs, maybe using --experimental-loader from NodeJS to load CSS from a file in the Layout component? Maybe layout.js could own all the HTML from build.js so then we would have all the <head> and <body> content in there too?

import './components/footer.js';
import './components/header.js';
import globalCss from './styles/main.css';

const template = document.createElement('template');

template.innerHTML = `
  <html>
    <head>
      <!-- HTML from build.js here -->
      <style>
        ${globalCss}
      </style>
   </head>

   <body>
    <wcc-header></wcc-header>

    <main>
      <slot name="content"></slot>
    </main>
  
    <wcc-footer></wcc-footer>
  </body>
</html>
`;

class Layout extends HTMLElement {
  connectedCallback() {
    this.innerHTML = tempate.content.textContent;
  }
}

export default Layout;

Then we could author the CSS in a .css file and manage it all in layout.js. But it's fine to just hardcode the CSS in the string first, then we could improve upon it with loading it from a .css file.

Anyway, just thinking out load. 😃

Jun 09 '22 19:06 thescientist13