Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

lift component level CSS to <head> for documentation site #60

Open
thescientist13 opened this issue Jun 8, 2022 · 3 comments
Open

lift component level CSS to <head> for documentation site #60

thescientist13 opened this issue Jun 8, 2022 · 3 comments
Assignees
@ajukadavid
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers question Further information is requested
Milestone
Proof of Concept

Comments

@thescientist13
Copy link
Member

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.
@thescientist13 thescientist13 added documentation Improvements or additions to documentation good first issue Good for newcomers labels Jun 8, 2022
@thescientist13 thescientist13 added this to the Proof of Concept milestone Jun 8, 2022
@thescientist13 thescientist13 changed the title lift component CSS to <head> lift component level CSS to <head> for documentation site Jun 8, 2022
@ajukadavid
Copy link

can i be assigned this issue?

@thescientist13
Copy link
Member Author

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! 👍

@thescientist13 thescientist13 added the question Further information is requested label Jun 9, 2022
@thescientist13
Copy link
Member Author

thescientist13 commented Jun 9, 2022 •
edited
Loading

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. 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ajukadavid ajukadavid

Labels
documentation Improvements or additions to documentation good first issue Good for newcomers question Further information is requested
Projects
None yet
Milestone
Proof of Concept
Development

No branches or pull requests
2 participants
@thescientist13 @ajukadavid