Owen Buckley thescientist13

To quote from the web.dev article on serializing Declarative Shadow DOM

Passing the includeShadowRoots:true option serializes the entire subtree of an element, including its shadow roots. The included shadow roots are serialized using the <template shadowroot> syntax.

In the context of server side renderinbg (SSR), I'm not sure if it is saying that if it was set to false a) It would not literally does not render shadow roots at all b) just doesn't render / return them in <template>

So for example, given these custom elements + shadowRoot

Benchmark	Before	After	Difference
JS Payload	198KB	166KB	⬇️32KB
CSS Payload	12.1KB	11.2KB	⬇️.9KB
DOMContentLoaded	340ms	203ms	⬇️137ms
Lighthouse Performance Score	72	86	⬆️14
Time To First Meaningful Paint	4.4s	1.2s	⬇️3.2ms
Time To Interactive	4.4s	4.9s	⬆️.5ms

Benchmark	Before	After	Difference
JS Payload	716KB	622KB	⬇️94KB
Build Time	44.71s	29.08s	⬇️15.63s
Lighthouse Performance Score	47	52	⬆️5

	:host {
	text-align: center;
	margin-bottom: 40px;
	}

	:host h2 {
	font-size: 3em;
	}

	{
	"@babel/core": "^7.0.0",
	"@babel/node": "^7.0.0",
	"express": "^4.16.2",
	"pm2": "^2.7.2"
	}

	{
	"dependencies": {
	"react": "^16.2.0",
	"react-dom": "^16.2.0",
	"react-redux": "^5.0.6",
	"redux": "^3.7.2"
	},
	"devDependencies": {
	"@babel/cli": "^7.0.0",
	"@babel/preset-env": "^7.0.0",

	const express = require('express');
	const app = express();

	app.get('/', (req, res) => {
	res.send(`
	<html>
	<head>
	<title>SSR App</title>
	</head>

	FROM node:8

	# Create app directory
	WORKDIR /usr/src/app

	# Install app dependencies
	# A wildcard is used to ensure both package.json
	# AND package-lock.json are copied
	COPY package*.json ./

	// https://jsfiddle.net/thegreenhouseio/qjj9hvv9/
	class HelloWorld extends HTMLElement {
	constructor(name) {
	super();

	this.subject = name \|\| 'World';

	// creates a Shadow DOM tree
	this.root = this.attachShadow({ mode: 'closed' });
	}

	module: {

	rules: [{
	test: /\.(s*)css$/,
	use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'sass-loader'
	]
	}]