[breaking changes] Migrate to shadowrootmode support and modernize testing (#43)

Author: e111077

.github/workflows/test.yml

@@ -11,13 +11,16 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
 
       - name: NPM install
         run: npm ci
 
       - name: Build
         run: npm run build
 
+      - name: Install playwright browsers
+        run: npx playwright install-deps
+
       - name: Test
         run: npm test

README.md

@@ -6,18 +6,18 @@ A [ponyfill](https://ponyfill.com/) of the API described by Mason Freed at https
 
 ## Overview
 
-This package provides a function, `hydrateShadowRoots`, that converts `<template>` elements with a `shadowroot` attribute into ShadowRoots on the template's parent element.
+This package provides a function, `hydrateShadowRoots`, that converts `<template>` elements with a `shadowrootmode` attribute into ShadowRoots on the template's parent element.
 
 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.
 
-`<template shadowroot>` 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 shadowroot>` elements.
+`<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.
 
-If native support for `<template shadowroot>` is present, `hydrateShadowRoots` does nothing when called.
+If native support for `<template shadowrootmode>` is present, `hydrateShadowRoots` does nothing when called.
 
 ### Known limitations
 
 * Does not currently look into imperatively created shadow roots.
 * The mutation observer implementation
   * May not work properly in the face of streaming HTML parsing. Needs investigation.
-  * Will not notice imperatively created `<template shadowroot>` elements inside of other shadow roots.
+  * Will not notice imperatively created `<template shadowrootmode>` elements inside of other shadow roots.
 * Not enough benchmarks, and benchmarks of insufficient quality to be confident of good performance.

bench/many_deep.html

@@ -27,7 +27,7 @@
       const n = 1000;
       for (let i = 0; i < n; i++) {
         html += `<div>
-          <template shadowroot="open">
+          <template shadowrootmode="open">
         `;
       }
       for (let i = 0; i < n; i++) {

bench/many_flat.html

@@ -25,7 +25,7 @@
       }
       const html = `
         <div>
-          <template shadowroot="open">
+          <template shadowrootmode="open">
             <div>Hello world</div>
           </template>
         </div>