Skip to content

kevinpschaaf/wc-ssr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

wc-ssr

Explorations in server-side rendering web components.

When ssr.js is injected in a page built with shadow-dom, it clones that live document, replaces all shadowRoots with <shadow-root>, replaces styles in shadowRoots with placeholder <shadow-style> elements keyed to a master deduped shadow-styles list that's put in a template in head, and injects the <shadow-root> element definition. For now it also removes all imports/scripts so it's just a static page (this exploration does not cover re-inflating/mounting the custom elements, only static rendering for first paint). The script will open a new tab with the source of the cloned ssr-ified document.

e.g. open https://shop.polymer-project.org/, then paste this in the console:

var s = document.createElement('script');
s.src = 'https://polygit2.appspot.com/wc-ssr+kevinpschaaf+:master/components/wc-ssr/ssr.js';
s.onload = function() { window.ssrify(true); };
document.head.appendChild(s);

Then check out view-source of the newly opened tab (look for blocked popup) to see the declarative <shadow-roots> in the source, and in the elements panel you should see real #shadow-roots.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published