CODEWITHSUNDEEP
gatsbyweb-componentshadow-dom
JoshBuildsStuff
JoshBuildsStuff

Reputation: 23

Using shadow DOM Web Components in Gatsby

I have a web component at the top of the page that doesn't build the shadow DOM until the hydration phase, so there's a noticeable jump in my page between pulling the SSR static page and hydration after navigating to the website.

I'm using a Gatsby Script component to load the web components from a CDN then exporting them in the gatsby-browser and gatsby-ssr API as outlined in the documentation here.. Just like in this documentation, I'm also using the wrapPageElement function to load the scripts.

export const wrapPageElement = ({ element }) => {
  return (
    <>
      <Script type='module' src='CDN URL TO WEB COMPONENTS' />
      
      <web-component-from-imported-system></web-component-from-imported-system>  
    </>
  );
};

I thought adding the export of the gatsby-shared to the gatsby-ssr file would pre-render the web component on build so it appears on the initial load of the static page, but that doesn't appear to be the case. When I load the page I still have the empty web component.

That <web-component-from-imported-system> is still there on load, but it doesn't populate until hydration.

Does the shadow DOM not render on build, or am I missing something here?

Thanks a bunch!

I have tried importing the script using Gatsby's script component into the wrapPageFunction in my gatsby-shared file, then exported that in both the gatsby-browser and gatsby-ssr files. I expected to see the web component that's being pulled in from the script to populate into the web component's element on build, but it appears SSR does not support shadow DOM.

Upvotes: 1

Views: 29

Answers (0)

Related Questions