Owen Buckley thescientist13

## hero.css
:host {
  text-align: center;
  margin-bottom: 40px;
}

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

## get-inner-html.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                thescientist13
                / get-inner-html.md
            
            
              Created
              May 10, 2022 01:56
            
              
                getInnerHTML clarification
              
          
    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

  
## server.js
const express = require('express');
const app = express();

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

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

## package.json
{
  "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",

## Dockerfile
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 ./

## custom-element-example.js
// 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' });
  }

## providence-geeks-stats-pt3.csv

          
            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

## webpack4-build-stats-local.csv

          
            Benchmark
            Before
            After
            Difference

            
              JS Payload
              716KB
              622KB
              ⬇️94KB

            
              Build Time
              44.71s
              29.08s
              ⬇️15.63s

            
              Lighthouse Performance Score
              47
              52
              ⬆️5

## mini-css-extract-plugin-configuration.js
module: {

  rules: [{
    test: /\.(s*)css$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
  }]
	:host {
	text-align: center;
	margin-bottom: 40px;
	}

	:host h2 {
	font-size: 3em;
	}
	const express = require('express');
	const app = express();

	app.get('/', (req, res) => {
	res.send(`
	<html>
	<head>
	<title>SSR App</title>
	</head>
	{
	"@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",
	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' });
	}
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
	module: {

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