https://github.com/thescientist13/get-inner-html

Example for demonstrating and understanding getInnerHTML
https://github.com/thescientist13/get-inner-html

Last synced: about 1 month ago
JSON representation

Example for demonstrating and understanding getInnerHTML

• Host: GitHub
• URL: https://github.com/thescientist13/get-inner-html
• Owner: thescientist13
• Created: 2022-05-11T00:50:36.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-11T01:10:42.000Z (over 2 years ago)
• Last Synced: 2024-10-29T03:41:49.800Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://unique-bombolone-b3ee26.netlify.app
• Size: 31.3 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Netlify Status](https://api.netlify.com/api/v1/badges/7b65545b-431a-49fb-aa46-8ff5bbcb58b4/deploy-status)](https://app.netlify.com/sites/unique-bombolone-b3ee26/deploys)

# get-inner-html

Example for demonstrating and understanding `getInnerHTML`, used in Declarative Shadow DOM.

## Setup

1. Clone the repo

1. Run `npm ci`

1. Run `npm start`

`localhost:8080` should open in your browser.

> _Make sure to test with a browser that supports Declarative Shadow DOM, like Chrome or Edge._

## Overview

To quote from the [web.dev article](https://web.dev/declarative-shadow-dom/#serialization) 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 `` syntax.

In the context of server side rendering (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 ``

So for example, given these custom elements + shadowRoot

```js

// navigation.js

const template = document.createElement('template');

template.innerHTML = `

  

    


      
Home

      
About

      
Contact

    


  



`;


class Navigation extends HTMLElement {

  connectedCallback() {

    if (!this.shadowRoot) {

      this.attachShadow({ mode: 'open' });

      this.shadowRoot.appendChild(template.content.cloneNode(true));

    }

  }

}

customElements.define('wcc-navigation', Navigation);

// header.js

import './navigation.js';

const template = document.createElement('template');

template.innerHTML = `

  

    
Welcome to my website

    

  

`;


class Header extends HTMLElement {

  connectedCallback() {

    if (!this.shadowRoot) {

      this.attachShadow({ mode: 'open' });

      this.shadowRoot.appendChild(template.content.cloneNode(true));

    }

  }

}

export { Header };

customElements.define('wcc-header', Header);

```

And invoked as so

```js

import { Header } from './header.js';

const element = new Header();

const html = element.getInnerHTML({ includeShadowRoots: false });

console.debug({ html });

```

----

Would the output be

A) No Shadow Roots

```html

  
Welcome to my website

  


```

or

B) Just no `` (e.g. only light DOM)

```html

  
Welcome to my website

  

    


      
Home

      
About

      
Contact

    


  



```

----

It seems per testing in Chrome, `true` outputs just the first pass, and `false` returns nothing?

```

getInnerHTML (true) 

  

    
Welcome to my website

    

  


(index):15 getInnerHTML (false) 

```