├── .gitignore
├── src
    ├── _implementation
    │   ├── default_implementation.ts
    │   ├── util.ts
    │   ├── feature_detect.ts
    │   ├── mutation_observer.ts
    │   ├── queryselectorall.ts
    │   └── manual_walk.ts
    ├── template-shadowroot.ts
    └── test
    │   └── template-shadowroot_test.ts
├── web-test-runner.config.mjs
├── .github
    └── workflows
    │   └── test.yml
├── tsconfig.json
├── rollup.config.js
├── bench
    ├── tach.json
    ├── many_flat.html
    └── many_deep.html
├── README.md
├── package.json
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
 1 | coverage
 2 | node_modules/
 3 | .npm
 4 | .vscode
 5 | 
 6 | # build output
 7 | /template-shadowroot.*
 8 | /test/
 9 | /_implementation/
10 | 


--------------------------------------------------------------------------------
/src/_implementation/default_implementation.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * @license
3 |  * Copyright 2020 Google LLC
4 |  * SPDX-License-Identifier: BSD-3-Clause
5 |  */
6 | 
7 | // TODO(rictic): do more robust benchmarks and pick a winner.
8 | export {hydrateShadowRoots} from './manual_walk.js';
9 | 


--------------------------------------------------------------------------------
/src/template-shadowroot.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright 2019 Google LLC
 4 |  * SPDX-License-Identifier: BSD-3-Clause
 5 |  */
 6 | 
 7 | import {hasNativeDeclarativeShadowRoots} from './_implementation/feature_detect.js';
 8 | import {hydrateShadowRoots} from './_implementation/default_implementation.js';
 9 | 
10 | export {hasNativeDeclarativeShadowRoots, hydrateShadowRoots};
11 | 


--------------------------------------------------------------------------------
/web-test-runner.config.mjs:
--------------------------------------------------------------------------------
 1 | import { playwrightLauncher } from '@web/test-runner-playwright';
 2 | 
 3 | export default {
 4 |   concurrency: 10,
 5 |   nodeResolve: true,
 6 |   watch: false,
 7 |   files: './test/*_test.js',
 8 |   browsers: [
 9 |     playwrightLauncher({ product: 'chromium' }),
10 |     playwrightLauncher({ product: 'firefox' }),
11 |     playwrightLauncher({ product: 'webkit' }),
12 |   ],
13 | };
14 | 


--------------------------------------------------------------------------------
/src/_implementation/util.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright 2019 Google LLC
 4 |  * SPDX-License-Identifier: BSD-3-Clause
 5 |  */
 6 | 
 7 | export const hasNoParentElement =
 8 |     (e: Element|DocumentFragment): e is DocumentFragment =>
 9 |         e.parentElement === null;
10 | export const isTemplate = (e: Node): e is HTMLTemplateElement =>
11 |     (e as Partial<Element>).tagName === 'TEMPLATE';
12 | export const isElement = (e: Node): e is HTMLElement =>
13 |     e.nodeType === Node.ELEMENT_NODE;
14 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: tests
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | 
 6 | jobs:
 7 |   tests:
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     steps:
11 |       - uses: actions/checkout@v2
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: 18
15 | 
16 |       - name: NPM install
17 |         run: npm ci
18 | 
19 |       - name: Build
20 |         run: npm run build
21 | 
22 |       - name: Install playwright browsers
23 |         run: npx playwright install-deps
24 | 
25 |       - name: Test
26 |         run: npm test
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2019",
 4 |     "module": "esnext",
 5 |     "lib": ["es2019", "dom"],
 6 |     "declaration": true,
 7 |     "declarationMap": true,
 8 |     "sourceMap": true,
 9 |     "inlineSources": true,
10 |     "outDir": "./",
11 |     "rootDir": "./src",
12 |     "strict": true,
13 |     "noUnusedLocals": true,
14 |     "noUnusedParameters": true,
15 |     "noImplicitReturns": true,
16 |     "noFallthroughCasesInSwitch": true,
17 |     "moduleResolution": "node",
18 |     "esModuleInterop": true
19 |   },
20 |   "include": ["src/**/*.ts"],
21 |   "exclude": []
22 | }
23 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import {terser} from 'rollup-plugin-terser';
 2 | import sourcemaps from 'rollup-plugin-sourcemaps';
 3 | 
 4 | export default {
 5 |   input: 'template-shadowroot.js',
 6 |   plugins: [
 7 |     terser({
 8 |       module: true,
 9 |       warnings: true,
10 |       // Prevent Terser from removing the generated `var TemplateShadowRoot =
11 |       // ...;` (where `TemplateShadowRoot` is intended for users and never used
12 |       // in the bundle itself).
13 |       compress: {
14 |         top_retain: ['TemplateShadowRoot'],
15 |       },
16 |       mangle: {
17 |         reserved: ['TemplateShadowRoot'],
18 |       },
19 |     }),
20 |     sourcemaps(),
21 |   ],
22 |   output: {
23 |     file: 'template-shadowroot.min.js',
24 |     format: 'iife',
25 |     name: 'TemplateShadowRoot',
26 |     sourcemap: true,
27 |   },
28 | };
29 | 


--------------------------------------------------------------------------------
/bench/tach.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://raw.githubusercontent.com/Polymer/tachometer/master/config.schema.json",
 3 |   "timeout": 0.001,
 4 |   "sampleSize": 25,
 5 |   "benchmarks": [
 6 |     {
 7 |       "measurement": "global",
 8 |       "browser": "chrome-headless",
 9 |       "expand": [
10 |         {
11 |           "url": "./bench/many_flat.html?manualWalk",
12 |           "name": "flat tree: manual walk"
13 |         },
14 |         {
15 |           "url": "./bench/many_flat.html?querySelector",
16 |           "name": "flat tree: querySelectorAll"
17 |         },
18 |         {
19 |           "url": "./bench/many_deep.html?manualWalk",
20 |           "name": "deep tree: manual walk"
21 |         },
22 |         {
23 |           "url": "./bench/many_deep.html?querySelector",
24 |           "name": "deep tree: querySelectorAll"
25 |         }
26 |       ]
27 |     }
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/src/_implementation/feature_detect.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright 2020 Google LLC
 4 |  * SPDX-License-Identifier: BSD-3-Clause
 5 |  */
 6 | 
 7 | // lib.dom.ts is out of date, so declare our own parseFromString here.
 8 | interface DOMParser {
 9 |   parseFromString(string: string, type: DOMParserSupportedType, options?: {
10 |     includeShadowRoots: boolean;
11 |   }): Document;
12 | }
13 | 
14 | // This isn't ideal. Setting .innerHTML is not compatible with some
15 | // TrustedTypes CSP policies. Discussion at:
16 | //     https://github.com/mfreed7/declarative-shadow-dom/issues/3
17 | let hasNative: boolean|undefined;
18 | export function hasNativeDeclarativeShadowRoots(): boolean {
19 |   if (hasNative === undefined) {
20 |     const html = `<div><template shadowrootmode="open"></template></div>`;
21 |     const fragment = (new DOMParser() as DOMParser).parseFromString(html, 'text/html', {
22 |       includeShadowRoots: true
23 |     });
24 |     hasNative = !!fragment.querySelector('div')?.shadowRoot;
25 |   }
26 |   return hasNative;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/_implementation/mutation_observer.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright 2020 Google LLC
 4 |  * SPDX-License-Identifier: BSD-3-Clause
 5 |  */
 6 | 
 7 | import { hydrateShadowRoots } from './default_implementation.js';
 8 | 
 9 | import { hasNativeDeclarativeShadowRoots } from './feature_detect.js';
10 | 
11 | export function transformShadowRoots(within: Node = document) {
12 |   if (hasNativeDeclarativeShadowRoots()) {
13 |     return { mutationObserver: undefined, cleanup() {} }; // do nothing
14 |   }
15 |   const mutationObserver = new MutationObserver((mutations, _) => {
16 |     for (const mutation of mutations) {
17 |       // TODO(rictic): test with streamed HTML that pauses in the middle
18 |       //     of a <template shadowrootmode> element. Do we get a mutation
19 |       //     with only part of the template's contents? What happens when
20 |       //     we remove the template from the DOM?
21 |       //     Tricky!
22 |       hydrateShadowRoots(mutation.target as unknown as ParentNode);
23 |     }
24 |   });
25 |   mutationObserver.observe(within, { childList: true, subtree: true });
26 |   return {
27 |     mutationObserver,
28 |     cleanup() {
29 |       mutationObserver.disconnect();
30 |     },
31 |   };
32 | }
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Declarative Shadow DOM Ponyfill
 2 | 
 3 | Declarative Shadow DOM for SSR
 4 | 
 5 | A [ponyfill](https://ponyfill.com/) of the API described by Mason Freed at https://github.com/mfreed7/declarative-shadow-dom.
 6 | 
 7 | ## Overview
 8 | 
 9 | This package provides a function, `hydrateShadowRoots`, that converts `<template>` elements with a `shadowrootmode` attribute into ShadowRoots on the template's parent element.
10 | 
11 | This allows HTML with shadow roots to be serialized to plain HTML, and the serialized shadow roots "rehydrated" (separate from component hydration) on the client.
12 | 
13 | `<template shadowrootmode>` elements are transformed bottom up so that in the case where they're nested, all elements within the declarative shadow tree stay inert until they have all been moved from their `<template shadowrootmode>` elements.
14 | 
15 | If native support for `<template shadowrootmode>` is present, `hydrateShadowRoots` does nothing when called.
16 | 
17 | ### Known limitations
18 | 
19 | * Does not currently look into imperatively created shadow roots.
20 | * The mutation observer implementation
21 |   * May not work properly in the face of streaming HTML parsing. Needs investigation.
22 |   * Will not notice imperatively created `<template shadowrootmode>` elements inside of other shadow roots.
23 | * Not enough benchmarks, and benchmarks of insufficient quality to be confident of good performance.
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@webcomponents/template-shadowroot",
 3 |   "version": "0.2.1",
 4 |   "description": "",
 5 |   "main": "template-shadowroot.js",
 6 |   "module": "template-shadowroot.js",
 7 |   "browser": true,
 8 |   "type": "module",
 9 |   "publishConfig": {
10 |     "access": "public"
11 |   },
12 |   "scripts": {
13 |     "build": "tsc --build && rollup --config rollup.config.js",
14 |     "test": "wtr --config web-test-runner.config.mjs",
15 |     "build:watch": "tsc --build --watch",
16 |     "test:watch": "wtr --config web-test-runner.config.mjs --watch"
17 |   },
18 |   "files": [
19 |     "template-shadowroot.*",
20 |     "_implementation"
21 |   ],
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "git+https://github.com/webcomponents/template-shadowroot.git"
25 |   },
26 |   "keywords": [],
27 |   "author": "Google LLC",
28 |   "license": "BSD-3-Clause",
29 |   "bugs": {
30 |     "url": "https://github.com/webcomponents/template-shadowroot/issues"
31 |   },
32 |   "homepage": "https://github.com/webcomponents/template-shadowroot#readme",
33 |   "devDependencies": {
34 |     "@esm-bundle/chai": "^4.3.4-fix.0",
35 |     "@types/mocha": "^10.0.1",
36 |     "@web/test-runner": "^0.15.0",
37 |     "@web/test-runner-playwright": "^0.9.0",
38 |     "rollup": "^2.79.1",
39 |     "rollup-plugin-sourcemaps": "^0.6.3",
40 |     "rollup-plugin-terser": "^7.0.2",
41 |     "tachometer": "^0.7.0",
42 |     "typescript": "^4.9.5"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2021 Google LLC. All rights reserved.
 4 | 
 5 | Redistribution and use in source and binary forms, with or without
 6 | modification, are permitted provided that the following conditions are met:
 7 | 
 8 | 1. Redistributions of source code must retain the above copyright notice, this
 9 |    list of conditions and the following disclaimer.
10 | 
11 | 2. Redistributions in binary form must reproduce the above copyright notice,
12 |    this list of conditions and the following disclaimer in the documentation
13 |    and/or other materials provided with the distribution.
14 | 
15 | 3. Neither the name of the copyright holder nor the names of its
16 |    contributors may be used to endorse or promote products derived from
17 |    this software without specific prior written permission.
18 | 
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 | 


--------------------------------------------------------------------------------
/bench/many_flat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head></head>
 5 | 
 6 | <body>
 7 |   <!--
 8 |     Benchmarks an HTML document with many small consecutive
 9 |     <template shadowroot> elements.
10 |   -->
11 |   <script type="module">
12 |     import { hydrateShadowRoots as manualWalkHydration } from '../_implementation/manual_walk.js';
13 |     import { hydrateShadowRoots as querySelectorHydration } from '../_implementation/queryselectorall.js';
14 | 
15 |     const implausiblyLongTimeToIndicateFailure = 9 * 1000 * 1000;
16 | 
17 |     function benchmark(hydrateMethod) {
18 |       let hydrateShadowRoots;
19 |       if (hydrateMethod === 'manualWalk') {
20 |         hydrateShadowRoots = manualWalkHydration;
21 |       } else if (hydrateMethod === 'querySelector') {
22 |         hydrateShadowRoots = querySelectorHydration;
23 |       } else {
24 |         return implausiblyLongTimeToIndicateFailure;
25 |       }
26 |       const html = `
27 |         <div>
28 |           <template shadowrootmode="open">
29 |             <div>Hello world</div>
30 |           </template>
31 |         </div>
32 |       `;
33 | 
34 |       const start = performance.now();
35 |       document.body.innerHTML = html.repeat(1000);
36 |       hydrateShadowRoots(document.body);
37 |       const duration = performance.now() - start;
38 |       if (document.querySelector('template') === null) {
39 |         return duration;
40 |       } else {
41 |         // hydration failed, still see templates in the document!
42 |         return implausiblyLongTimeToIndicateFailure;
43 |       }
44 |     }
45 | 
46 |     window.tachometerResult = benchmark(window.location.search.slice(1));
47 |   </script>
48 | </body>
49 | 
50 | </html>
51 | 


--------------------------------------------------------------------------------
/bench/many_deep.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head></head>
 5 | 
 6 | <body>
 7 |   <!--
 8 |     Benchmarks an HTML document with <template shadowroot> elements inside of
 9 |     <template shadowroot> elements, nested deeply.
10 |    -->
11 |   <script type="module">
12 |     import { hydrateShadowRoots as manualWalkHydration } from '../_implementation/manual_walk.js';
13 |     import { hydrateShadowRoots as querySelectorHydration } from '../_implementation/queryselectorall.js';
14 | 
15 |     const implausiblyLongTimeToIndicateFailure = 9 * 1000 * 1000;
16 | 
17 |     function benchmark(hydrateMethod) {
18 |       let hydrateShadowRoots;
19 |       if (hydrateMethod === 'manualWalk') {
20 |         hydrateShadowRoots = manualWalkHydration;
21 |       } else if (hydrateMethod === 'querySelector') {
22 |         hydrateShadowRoots = querySelectorHydration;
23 |       } else {
24 |         return implausiblyLongTimeToIndicateFailure;
25 |       }
26 |       let html = '';
27 |       const n = 1000;
28 |       for (let i = 0; i < n; i++) {
29 |         html += `<div>
30 |           <template shadowrootmode="open">
31 |         `;
32 |       }
33 |       for (let i = 0; i < n; i++) {
34 |         html += `
35 |               <div>Hello world</div>
36 |             </template>
37 |           </div>
38 |         `;
39 |       }
40 | 
41 |       const start = performance.now();
42 |       document.body.innerHTML = html;
43 |       hydrateShadowRoots(document.body);
44 |       const duration = performance.now() - start;
45 |       if (document.querySelector('template') === null) {
46 |         return duration;
47 |       } else {
48 |         // hydration failed, still see templates in the document!
49 |         return implausiblyLongTimeToIndicateFailure;
50 |       }
51 |     }
52 | 
53 |     window.tachometerResult = benchmark(window.location.search.slice(1));
54 |   </script>
55 | </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/src/_implementation/queryselectorall.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright 2020 Google LLC
 4 |  * SPDX-License-Identifier: BSD-3-Clause
 5 |  */
 6 | 
 7 | import {hasNativeDeclarativeShadowRoots} from './feature_detect.js';
 8 | 
 9 | interface StackEntry {
10 |   /**
11 |    * The nearest ancestor <template> element, if any, of the templates.
12 |    */
13 |   template: HTMLTemplateElement|undefined;
14 |   /**
15 |    * A stack of template elements inside `template` – or `root` if `template` is
16 |    * undefined – to be processed.
17 |    *
18 |    * The array is in reverse document order, such that the elements at the end
19 |    * of the array should be processed first (so that we can use templates.pop()
20 |    * to get the next element to process).
21 |    */
22 |   templates: HTMLTemplateElement[];
23 | }
24 | 
25 | /*
26 |  * Traverses the DOM to find all <template> elements with a `shadowroot`
27 |  * attribute and move their content into a ShadowRoot on their parent element.
28 |  *
29 |  * This processing is done bottom up so that when top-level <template>
30 |  * elements are hydrated, their contents are already hydrated and in the
31 |  * final correct structure of elements and shadow roots.
32 |  */
33 | export const hydrateShadowRoots = (root: Element|DocumentFragment) => {
34 |   if (hasNativeDeclarativeShadowRoots()) {
35 |     return;  // nothing to do
36 |   }
37 |   const stack: StackEntry[] = [{
38 |     template: undefined,
39 |     templates: Array.from(root.querySelectorAll('template')).reverse()
40 |   }];
41 |   while (stack.length > 0) {
42 |     const context = stack[stack.length - 1];
43 |     const childTemplate = context.templates.pop();
44 |     if (childTemplate === undefined) {
45 |       const template = context.template;
46 |       if (template !== undefined) {
47 |         const host = template.parentElement!;
48 |         const mode = template.getAttribute('shadowrootmode');
49 |         if (mode === 'open' || mode === 'closed') {
50 |           const delegatesFocus =
51 |               template.hasAttribute('shadowrootdelegatesfocus');
52 |           try {
53 |             const shadow = host.attachShadow({mode, delegatesFocus});
54 |             shadow.append(template.content);
55 |           } catch {
56 |             // there was already a shadow root.
57 |             // TODO(rictic): log an error event?
58 |           }
59 |           host.removeChild(template);
60 |         }
61 |       }
62 |       stack.pop();
63 |       continue;
64 |     }
65 |     stack.push({
66 |       template: childTemplate,
67 |       templates: Array.from(childTemplate.content.querySelectorAll('template'))
68 |                      .reverse()
69 |     });
70 |   }
71 | };
72 | 


--------------------------------------------------------------------------------
/src/_implementation/manual_walk.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * Copyright 2019 Google LLC
  4 |  * SPDX-License-Identifier: BSD-3-Clause
  5 |  */
  6 | 
  7 | import {hasNativeDeclarativeShadowRoots} from './feature_detect.js';
  8 | import {hasNoParentElement, isElement, isTemplate} from './util.js';
  9 | 
 10 | /*
 11 |  * Traverses the DOM to find all <template> elements with a `shadowrootmode`
 12 |  * attribute and move their content into a ShadowRoot on their parent element.
 13 |  *
 14 |  * This processing is done bottom up so that when top-level <template>
 15 |  * elements are hydrated, their contents are already hydrated and in the
 16 |  * final correct structure of elements and shadow roots.
 17 |  */
 18 | export const hydrateShadowRoots = (root: ParentNode) => {
 19 |   if (hasNativeDeclarativeShadowRoots()) {
 20 |     return;  // nothing to do
 21 |   }
 22 | 
 23 |   // Approaches to try and benchmark:
 24 |   //  - manual walk (current implementation)
 25 |   //  - querySelectorAll
 26 |   //  - TreeWalker
 27 | 
 28 |   // Stack of nested templates that we're currently processing. Use to
 29 |   // remember how to get from a <template>.content DocumentFragment back to
 30 |   // its owner <template>
 31 |   const templateStack: Array<HTMLTemplateElement> = [];
 32 | 
 33 |   let currentNode: Element|DocumentFragment|null = root.firstElementChild;
 34 | 
 35 |   // The outer loop traverses down, looking for <template shadowrootmode>
 36 |   // elements. The inner loop traverses back up, hydrating them in a postorder
 37 |   // traversal.
 38 |   while (currentNode !== root && currentNode !== null) {
 39 |     if (isTemplate(currentNode)) {
 40 |       templateStack.push(currentNode);
 41 |       currentNode = currentNode.content;
 42 |     } else if (currentNode.firstElementChild !== null) {
 43 |       // Traverse down
 44 |       currentNode = currentNode.firstElementChild;
 45 |     } else if (
 46 |         isElement(currentNode) && currentNode.nextElementSibling !== null) {
 47 |       // Element is empty, but has a next sibling. Traverse that.
 48 |       currentNode = currentNode.nextElementSibling;
 49 |     } else {
 50 |       // Element is empty and the last child. Traverse to next aunt/grandaunt.
 51 | 
 52 |       // Store templates we hydrate for one loop so that we can remove them
 53 |       // *after* traversing to their successor.
 54 |       let template: HTMLTemplateElement|undefined;
 55 | 
 56 |       while (currentNode !== root && currentNode !== null) {
 57 |         if (hasNoParentElement(currentNode)) {
 58 |           // We must be at a <template>'s content fragment.
 59 |           template = templateStack.pop()!;
 60 |           const host = template.parentElement!;
 61 |           const mode = template.getAttribute('shadowrootmode');
 62 |           currentNode = template;
 63 |           if (mode === 'open' || mode === 'closed') {
 64 |             const delegatesFocus =
 65 |                 template.hasAttribute('shadowrootdelegatesfocus');
 66 |             try {
 67 |               const shadow = host.attachShadow({mode, delegatesFocus});
 68 |               shadow.append(template.content);
 69 |             } catch {
 70 |               // there was already a shadow root.
 71 |               // TODO(rictic): log an error event?
 72 |             }
 73 |           } else {
 74 |             template = undefined;
 75 |           }
 76 |         } else {
 77 |           const nextSibling: Element|null|undefined =
 78 |               currentNode.nextElementSibling;
 79 |           if (nextSibling != null) {
 80 |             currentNode = nextSibling;
 81 |             if (template !== undefined) {
 82 |               template.parentElement!.removeChild(template);
 83 |             }
 84 |             break;
 85 |           }
 86 |           const nextAunt: Element|null|undefined =
 87 |               currentNode.parentElement?.nextElementSibling;
 88 |           if (nextAunt != null) {
 89 |             currentNode = nextAunt;
 90 |             if (template !== undefined) {
 91 |               template.parentElement!.removeChild(template);
 92 |             }
 93 |             break;
 94 |           }
 95 |           currentNode = currentNode.parentElement;
 96 |           if (template !== undefined) {
 97 |             template.parentElement!.removeChild(template);
 98 |             template = undefined;
 99 |           }
100 |         }
101 |       }
102 |     }
103 |   }
104 | };
105 | 


--------------------------------------------------------------------------------
/src/test/template-shadowroot_test.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * Copyright 2019 Google LLC
  4 |  * SPDX-License-Identifier: BSD-3-Clause
  5 |  */
  6 | 
  7 | import { hydrateShadowRoots as manualWalkHydration } from '../_implementation/manual_walk.js';
  8 | import { transformShadowRoots } from '../_implementation/mutation_observer';
  9 | import { hydrateShadowRoots as querySelectorHydration } from '../_implementation/queryselectorall.js';
 10 | import { hasNativeDeclarativeShadowRoots } from '../template-shadowroot.js';
 11 | import { expect } from '@esm-bundle/chai';
 12 | 
 13 | const elementLog: Array<string | null> = [];
 14 | 
 15 | // lib.dom.ts is out of date, so declare our own parseFromString here.
 16 | interface DOMParser {
 17 |   parseFromString(
 18 |     string: string,
 19 |     type: DOMParserSupportedType,
 20 |     options?: {
 21 |       includeShadowRoots: boolean;
 22 |     }
 23 |   ): Document;
 24 | }
 25 | 
 26 | function renderFragment(html: string) {
 27 |   const fragment = (new DOMParser() as DOMParser).parseFromString(
 28 |     html,
 29 |     'text/html',
 30 |     {
 31 |       includeShadowRoots: true,
 32 |     }
 33 |   );
 34 | 
 35 |   const root = document.createElement('div');
 36 |   root.appendChild(fragment.body.firstChild!);
 37 |   document.body.append(root);
 38 | 
 39 |   return root;
 40 | }
 41 | 
 42 | // for syntax highlighting
 43 | function html(s: TemplateStringsArray) {
 44 |   return s.join('');
 45 | }
 46 | 
 47 | async function waitATickForMutationObserverToRun() {
 48 |   return 0;
 49 | }
 50 | 
 51 | class TestLogElement extends HTMLElement {
 52 |   connectedCallback() {
 53 |     const label = this.getAttribute('label');
 54 |     elementLog.push(label);
 55 |   }
 56 | }
 57 | customElements.define('test-log', TestLogElement);
 58 | 
 59 | // When we serialize
 60 | function assertSerializesAs(
 61 |   actual: Element,
 62 |   expectedSerialization: string
 63 | ) {
 64 |   let actualSerialization = getSerializableTree(actual).innerHTML;
 65 |   actualSerialization = actualSerialization.replace(/\n\s+/g, '');
 66 |   expectedSerialization = expectedSerialization.replace(/\n\s+/g, '');
 67 |   expect(actualSerialization).equal(expectedSerialization);
 68 | }
 69 | const implementations = [
 70 |   ['manual walk ponyfill', manualWalkHydration],
 71 |   ['querySelectorAll ponyfill', querySelectorHydration],
 72 |   [
 73 |     'mutationObserver',
 74 |     () => {
 75 |       /* see below */
 76 |     },
 77 |   ],
 78 | ] as const;
 79 | for (const [name, hydrateShadowRoots] of implementations) {
 80 |   describe(name, () => {
 81 |     let cleanupFn = () => {};
 82 |     const automaticHydration =
 83 |       name === 'mutationObserver' || hasNativeDeclarativeShadowRoots();
 84 |     beforeEach(() => {
 85 |       if (name === 'mutationObserver') {
 86 |         let { cleanup } = transformShadowRoots(document);
 87 |         cleanupFn = cleanup;
 88 |       }
 89 |     });
 90 |     afterEach(() => {
 91 |       elementLog.length = 0;
 92 |       cleanupFn();
 93 |     });
 94 | 
 95 |     it('hydrates a template with both syntaxes', async () => {
 96 |       const serialized = html`
 97 |         <test-log label="A">
 98 |           <template shadowrootmode="open">
 99 |             <h1>Hello</h1>
100 |             <test-log label="B"></test-log>
101 |           </template>
102 |         </test-log>
103 |       `;
104 |       const root = renderFragment(serialized);
105 |       await waitATickForMutationObserverToRun();
106 |       if (!automaticHydration) {
107 |         expect(elementLog).eql(['A']);
108 |       }
109 |       hydrateShadowRoots(root);
110 |       expect(elementLog).eql(['A', 'B']);
111 |       expect(root.querySelector('test-log')?.shadowRoot).instanceOf(ShadowRoot);
112 |       assertSerializesAs(root, serialized);
113 |     });
114 | 
115 |     it('hydrates nested templates in postorder', async () => {
116 |       const serialized = html`
117 |         <test-log label="A">
118 |           <template shadowrootmode="open">
119 |             <h1>Hello</h1>
120 |             <test-log label="B">
121 |               <template shadowrootmode="open">
122 |                 <h1>World!</h1>
123 |                 <test-log label="C"></test-log>
124 |               </template>
125 |             </test-log>
126 |             <test-log label="D"></test-log>
127 |           </template>
128 |         </test-log>
129 |       `;
130 |       const root = renderFragment(serialized);
131 |       await waitATickForMutationObserverToRun();
132 |       if (!automaticHydration) {
133 |         expect(elementLog).eql(['A']);
134 |       }
135 |       hydrateShadowRoots(root);
136 |       expect(root.querySelector('test-log')?.shadowRoot).instanceOf(ShadowRoot);
137 |       // If the templates hydrated in document order, D would upgrade before C
138 |       expect(elementLog).eql(['A', 'B', 'C', 'D']);
139 |       assertSerializesAs(root, serialized);
140 |     });
141 | 
142 |     describe('multiple roots in the same host', () => {
143 |       it('ignores multiple open shadow roots', async () => {
144 |         const content = html`
145 |           <test-log label="A">
146 |             <template shadowrootmode="open">
147 |               <test-log label="B"></test-log>
148 |             </template>
149 |             <template shadowrootmode="open">
150 |               <test-log label="C"></test-log>
151 |             </template>
152 |           </test-log>
153 |         `;
154 |         const root = renderFragment(content);
155 |         await waitATickForMutationObserverToRun();
156 |         // Divergence between native prototype and this polyfill.
157 |         // Is it intentional? Filed as
158 |         // https://github.com/mfreed7/declarative-shadow-dom/issues/4
159 |         if (hasNativeDeclarativeShadowRoots()) {
160 |           expect(elementLog).eql(['A', 'C']);
161 |           assertSerializesAs(
162 |             root,
163 |             html`
164 |               <test-log label="A">
165 |                 <template shadowrootmode="open">
166 |                   <test-log label="C"></test-log>
167 |                 </template>
168 |               </test-log>
169 |             `
170 |           );
171 |         } else {
172 |           if (!automaticHydration) {
173 |             expect(elementLog).eql(['A']);
174 |           }
175 |           hydrateShadowRoots(root);
176 |           expect(elementLog).eql(['A', 'B']);
177 |           assertSerializesAs(
178 |             root,
179 |             html`
180 |               <test-log label="A">
181 |                 <template shadowrootmode="open">
182 |                   <test-log label="B"></test-log>
183 |                 </template>
184 |               </test-log>
185 |             `
186 |           );
187 |         }
188 |         expect(root.querySelector('test-log')?.shadowRoot).instanceOf(
189 |           ShadowRoot
190 |         );
191 |       });
192 | 
193 |       it('ignores multiple closed shadow roots', async () => {
194 |         const content = html`
195 |           <test-log label="A">
196 |             <template shadowrootmode="closed">
197 |               <test-log label="B"></test-log>
198 |             </template>
199 |             <template shadowrootmode="closed">
200 |               <test-log label="C"></test-log>
201 |             </template>
202 |           </test-log>
203 |         `;
204 |         const root = renderFragment(content);
205 |         const serialized = `
206 |           <test-log label="A">
207 |           </test-log>
208 |         `;
209 |         await waitATickForMutationObserverToRun();
210 |         // Divergence between native prototype and this polyfill.
211 |         // Is it intentional? Filed as
212 |         // https://github.com/mfreed7/declarative-shadow-dom/issues/4
213 |         if (hasNativeDeclarativeShadowRoots()) {
214 |           expect(elementLog).eql(['A', 'C']);
215 |         } else {
216 |           if (!automaticHydration) {
217 |             expect(elementLog).eql(['A']);
218 |           }
219 |           hydrateShadowRoots(root);
220 |           expect(elementLog).eql(['A', 'B']);
221 |         }
222 |         assertSerializesAs(root, serialized);
223 |         // Closed shadow root, so no .shadowRoot field
224 |         expect(root.querySelector('test-log')?.shadowRoot).equal(null);
225 |       });
226 |     });
227 | 
228 |     it('normal templates are not modified', async () => {
229 |       const serialized = html`
230 |         <test-log label="A">
231 |           <test-log label="B"></test-log>
232 |           <template>
233 |             <test-log label="C"></test-log>
234 |           </template>
235 |           <test-log label="D"></test-log>
236 |         </test-log>
237 |       `;
238 |       const root = renderFragment(serialized);
239 |       await waitATickForMutationObserverToRun();
240 |       expect(elementLog).eql(['A', 'B', 'D']);
241 |       hydrateShadowRoots(root);
242 |       expect(elementLog).eql(['A', 'B', 'D']);
243 |       assertSerializesAs(root, serialized);
244 |       expect(root.querySelector('test-log')?.shadowRoot).equal(null);
245 |     });
246 | 
247 |     it('shadow roots are expanded inside regular templates', async () => {
248 |       const serialized = html`
249 |         <test-log label="A">
250 |           <test-log label="B"></test-log>
251 |           <template>
252 |             <test-log label="C">
253 |               <template shadowrootmode="open">
254 |                 <div>Inner</div>
255 |               </template>
256 |             </test-log>
257 |           </template>
258 |           <test-log label="D"></test-log>
259 |         </test-log>
260 |       `;
261 |       const root = renderFragment(serialized);
262 |       await waitATickForMutationObserverToRun();
263 |       hydrateShadowRoots(root);
264 |       const innerShadowRoot = root
265 |         .querySelector('template')
266 |         ?.content.querySelector('test-log')?.shadowRoot;
267 |       expect(innerShadowRoot?.textContent?.trim()).equal('Inner');
268 |       assertSerializesAs(root, serialized);
269 |       expect(root.querySelector('test-log')?.shadowRoot).equal(null);
270 |       expect(
271 |         root.querySelector('template')?.content.querySelector('test-log')
272 |           ?.shadowRoot
273 |       ).instanceOf(ShadowRoot);
274 |     });
275 | 
276 |     it('can make closed shadow roots', async () => {
277 |       const content = html`
278 |         <test-log label="A">
279 |           <template shadowrootmode="closed">
280 |             <test-log label="B"></test-log>
281 |           </template>
282 |         </test-log>
283 |       `;
284 |       const root = renderFragment(content);
285 |       // closed shadow root does not get serialized
286 |       const serialized = `
287 |         <test-log label="A">
288 |         </test-log>
289 |       `;
290 |       await waitATickForMutationObserverToRun();
291 |       if (!automaticHydration) {
292 |         expect(elementLog).eql(['A']);
293 |       }
294 |       hydrateShadowRoots(root);
295 |       expect(elementLog).eql(['A', 'B']);
296 |       assertSerializesAs(root, serialized);
297 |       expect(root.querySelector('test-log')?.shadowRoot).equal(null);
298 |     });
299 | 
300 |     it('ignores shadowrootmode="unknown"', async () => {
301 |       const serialized = html`
302 |         <test-log label="A">
303 |           <template shadowrootmode="unknown">
304 |             <test-log label="B"></test-log>
305 |           </template>
306 |         </test-log>
307 |       `;
308 |       const root = renderFragment(serialized);
309 |       await waitATickForMutationObserverToRun();
310 |       expect(elementLog).eql(['A']);
311 |       hydrateShadowRoots(root);
312 |       expect(elementLog).eql(['A']);
313 |       expect(root.querySelector('test-log')?.shadowRoot).equal(null);
314 |       assertSerializesAs(root, serialized);
315 |     });
316 | 
317 |     // TODO(justinfagnani): more tests...
318 |   });
319 | }
320 | function isTemplate(e: Node): e is HTMLTemplateElement {
321 |   return (e as Partial<Element>).tagName === 'TEMPLATE';
322 | }
323 | function isElement(e: Node): e is HTMLElement {
324 |   return e.nodeType === Node.ELEMENT_NODE;
325 | }
326 | function isDocumentFragment(e: Node): e is DocumentFragment {
327 |   return e.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
328 | }
329 | 
330 | /**
331 |  * A somewhat hacky implementation of
332 |  *    element.getInnerHTML({ includeShadowRoots: true })
333 |  * from
334 |  * https://github.com/mfreed7/declarative-shadow-dom/blob/7fa1adec34dd997c2c04d4a8ed82f693fa3441ed/README.md#serialization
335 |  *
336 |  * Not super robust, but good enough for testing.
337 |  */
338 | function getSerializableTree<T extends Node>(node: T): T {
339 |   const children = (node as Partial<Element>).childNodes;
340 |   if (children === undefined || node.nodeType === Node.TEXT_NODE) {
341 |     return node.cloneNode(true) as T;
342 |   }
343 |   let clone;
344 |   if (isDocumentFragment(node)) {
345 |     clone = document.createDocumentFragment();
346 |   } else {
347 |     if (!isElement(node)) {
348 |       throw new Error(`Expected ${node} to be an element`);
349 |     }
350 |     clone = document.createElement(node.tagName);
351 |     const attributes = node.attributes;
352 |     for (let i = 0; i < attributes.length; i++) {
353 |       const attr = attributes.item(i)!;
354 |       clone.setAttribute(attr.name, attr.value);
355 |     }
356 |     if (node.shadowRoot !== null) {
357 |       const shadowTemplate = document.createElement('template');
358 |       shadowTemplate.setAttribute('shadowrootmode', 'open');
359 |       copyTemplateContents(node.shadowRoot, shadowTemplate.content);
360 |       clone.appendChild(shadowTemplate);
361 |     }
362 |   }
363 |   for (let i = 0; i < children.length; i++) {
364 |     clone.appendChild(getSerializableTree(children[i]));
365 |   }
366 |   if (isTemplate(node)) {
367 |     copyTemplateContents(node.content, (clone as HTMLTemplateElement).content);
368 |   }
369 |   return clone as unknown as T;
370 | }
371 | 
372 | function copyTemplateContents(
373 |   from: DocumentFragment | ShadowRoot,
374 |   to: DocumentFragment
375 | ) {
376 |   const contentChildren = from.childNodes;
377 |   for (let i = 0; i < contentChildren.length; i++) {
378 |     to.appendChild(getSerializableTree(contentChildren[i]));
379 |   }
380 | }
381 | 


--------------------------------------------------------------------------------