Migrates template attribute shadowroot -> shadowrootmode.

Refs #74.

Chrome originally shipped declarative shadow DOM with `shadowroot` as the relevant attribute name, however the spec changed to `shadowroot` and Chrome has deprecated the old behavior which will be removed soon. Therefore we should switch to `shadowrootmode` to align with the spec and support multiple browsers. See https://chromestatus.com/feature/6239658726391808.

This also might enable streaming support for DSD in Chrome? https://chromestatus.com/feature/5161240576393216

This migration was mostly done via a find and replace with some manual sanity checks.

.vscode/settings.json

@@ -31,6 +31,7 @@
         "runfiles",
         "semver",
         "shadowroot",
+        "shadowrootmode",
         "testonly",
         "transpiled",
         "tsjs",

README.md

@@ -145,7 +145,7 @@ export function MyComponent({ name }: { name: string }): VNode {
             with declarative shadow DOM, you don't have to use it. But if you
             don't you'll need to manually namespace your styles or else styles
             in different components could conflict with each other! */}
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             {/* Polyfill declarative shadow DOM for any browsers which don't
                 support it. */}
             {polyfillDeclarativeShadowDom()}

docs/internal/architecture/life_of_a_build.md

@@ -177,15 +177,15 @@ duplicate its styles.
 ```html
 <!-- Render `my-component`. -->
 <my-component>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <style>/* Styles go here. */</style>
         <div>Hello, World!</div>
     </template>
 </my-component>
 
 <!-- Render `my-component` again. -->
 <my-component>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <style>/* Styles need to be duplicated here, no way to share. */</style>
         <div>Hello, World!</div>
     </template>

examples/declarative_shadow_dom/component.tsx

@@ -9,7 +9,7 @@ export function Component({ children }: {
     return (
         <div id="component"> {/* Host element. */}
             {/* Shadow root. */}
-            <Template shadowroot="open">
+            <Template shadowrootmode="open">
                 {/* Polyfill declarative shadow DOM for browsers that don't
                 support it yet. */}
                 {polyfillDeclarativeShadowDom()}

examples/external/component/component.tsx

@@ -12,7 +12,7 @@ declare module 'preact' {
 
 export function Component(): VNode {
     return <my-component>
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             <img src="/logo" />
             <span>Component</span>
             <div id="replace">This text to be replaced by JavaScript.</div>

examples/preact/component/component.tsx

@@ -15,7 +15,7 @@ export function Component({ text, children }: {
     children: ComponentChildren,
 }): VNode {
     return <my-component id='component'>
-        <Template shadowroot='open'>
+        <Template shadowrootmode='open'>
             <h2>{text}</h2>
             <div id="replace">This text to be replaced by page JavaScript.</div>
             <slot></slot>

examples/site/about/about.tsx

@@ -9,7 +9,7 @@ export default function*(): Generator<PrerenderResource, void, void> {
         '/about/index.html',
         renderToHtml(baseLayout('About',
             <article>
-                <Template shadowroot="open">
+                <Template shadowrootmode="open">
                     {polyfillDeclarativeShadowDom()}
 
                     <p>

examples/site/blog/blog.tsx

@@ -49,7 +49,7 @@ export default async function*():
 function generatePostList(path: string, posts: PostMeta[]): PrerenderResource {
     return PrerenderResource.fromHtml(path, renderToHtml(baseLayout('Blog', 
         <article>
-            <Template shadowroot='open'>
+            <Template shadowrootmode='open'>
                 {polyfillDeclarativeShadowDom()}
 
                 <p>
@@ -78,7 +78,7 @@ async function generatePost({ urlPath, title, fileName }: PostMeta):
 
     return PrerenderResource.fromHtml(urlPath, renderToHtml(baseLayout(title, 
         <article>
-            <Template shadowroot='open'>
+            <Template shadowrootmode='open'>
                 {polyfillDeclarativeShadowDom()}
 
                 <p>This post generated from <a href={link.toString()}>{fileName}</a>.</p>

examples/site/components/counter/counter_prerender.tsx

@@ -14,7 +14,7 @@ declare module 'preact' {
 /** Renders a counter with the given initial value. */
 export function Counter({ initialValue }: { initialValue: number }): VNode {
     return <site-counter initial={initialValue}>
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             <span id="label">The current count is: {initialValue}.</span>
 
             {/* Render buttons disabled so they are inactive until

examples/site/components/footer/footer.tsx

@@ -6,7 +6,7 @@ import { repo } from '../../common/links.mjs';
 /** Renders a footer component for the site. */
 export function Footer(): VNode {
     return <footer>
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             <div>
                 Made with <a href='https://bazel.build/' rel='noopener' target='_blank'>Bazel</a> and <a href={repo.toString()} rel='noopener' target='_blank'>rules_prerender</a>.
             </div>

examples/site/components/header/header.tsx

@@ -5,7 +5,7 @@ import { VNode } from 'preact';
 /** Renders a header component with navigation to the rest of the site. */
 export function Header(): VNode {
     return <header>
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             <h1>My super cool site!</h1>
             <nav>
                 <ul>

examples/site/counter/counter.tsx

@@ -10,7 +10,7 @@ export default function*(): Generator<PrerenderResource, void, void> {
         '/counter/index.html',
         renderToHtml(baseLayout('Counter',
             <article>
-                <Template shadowroot="open">
+                <Template shadowrootmode="open">
                     {polyfillDeclarativeShadowDom()}
 
                     <p>This is a basic JavaScript counter.</p>

examples/site/home/home.tsx

@@ -8,7 +8,7 @@ export default function*(): Generator<PrerenderResource, void, void> {
     yield PrerenderResource.fromHtml('/index.html', renderToHtml(baseLayout(
         'Home',
         <article>
-            <Template shadowroot='open'>
+            <Template shadowrootmode='open'>
                 {polyfillDeclarativeShadowDom()}
 
                 <p>

examples/styles/site.tsx

@@ -9,7 +9,7 @@ export default function* (): Generator<PrerenderResource, void, void> {
             </head>
             <body>
                 <div id='shadowroot'>
-                    <Template shadowroot='open'>
+                    <Template shadowrootmode='open'>
                         <div id='hello'>Hello, World!</div>
                         {inlineStyle('./styles.css', import.meta)}
                     </Template>

examples/testonly/component/component.tsx

@@ -4,7 +4,7 @@ import { Transitive } from '../transitive/transitive.js';
 
 export function Component(): VNode {
     return <div>
-        <Template shadowroot='open'>
+        <Template shadowrootmode='open'>
             <span>Hello from the component!</span>
             <img src='/images/component.png' />
             <slot></slot>

examples/testonly/site.tsx

@@ -12,7 +12,7 @@ export default function*(): Generator<PrerenderResource, void, void> {
                 <h2>Testonly</h2>
 
                 <div>
-                    <Template shadowroot='open'>
+                    <Template shadowrootmode='open'>
                         <span>Hello from a testonly page!</span>
                         <img src='/images/site.png' />
                         <slot></slot>

examples/testonly/transitive/transitive.tsx

@@ -3,7 +3,7 @@ import { VNode } from 'preact';
 
 export function Transitive(): VNode {
     return <div>
-        <Template shadowroot='open'>
+        <Template shadowrootmode='open'>
             <span>Hello from the transitive component!</span>
             <img src='/images/transitive.png' />
 

packages/declarative_shadow_dom/README.md

@@ -69,7 +69,7 @@ export function renderMyComponent(): string {
     return `
 <!-- Always include a host element, don't make the template the first node. -->
 <div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <span>Shadow DOM content goes inside the template.</span>
 
         <!-- Inject the polyfill into the client bundle. -->
@@ -117,7 +117,7 @@ export function MyComponent(): string {
     return (
         {/* Always include a host element, don't make the template the first node. */}
         <div>
-            <template shadowroot="open">
+            <template shadowrootmode="open">
                 <span>Shadow DOM content goes inside the template.</span>
 
                 {/* Inject the polyfill into the client bundle. */}

packages/declarative_shadow_dom/declarative_shadow_dom_polyfill.mts

@@ -6,10 +6,10 @@
  * adapted for TypeScript.
  */
 
-const templates = document.querySelectorAll('template[shadowroot]') as
+const templates = document.querySelectorAll('template[shadowrootmode]') as
         NodeListOf<HTMLTemplateElement>;
 for (const template of Array.from(templates)) {
-    const mode = template.getAttribute('shadowroot');
+    const mode = template.getAttribute('shadowrootmode');
     if (mode !== 'open' && mode !== 'closed') {
         console.error(
             `Found declarative shadow root with invalid mode: ${mode}.`);

packages/preact/README.md

@@ -93,7 +93,7 @@ import { VNode } from 'preact';
 
 export function Component(): VNode {
     return <div>
-        <Template shadowroot="open">
+        <Template shadowrootmode="open">
             <div>Hello, World!</div>
             <slot></slot>
         </Template>

packages/preact/index.mts

@@ -57,7 +57,7 @@ export function inlineStyle(importPath: string, meta: ImportMeta): VNode {
 }
 
 interface TemplateProps extends JSX.HTMLAttributes<HTMLTemplateElement> {
-    shadowroot?: ShadowRootMode;
+    shadowrootmode?: ShadowRootMode;
 }
 
 /** A component representing the native HTML `<template />` tag. */

packages/preact/index_test.mts

@@ -112,10 +112,10 @@ describe('preact', () => {
             expect(html).toContain('<div>Hello, World!</div>');
         });
 
-        it('accepts `shadowroot`', () => {
-            const html = render(Template({ shadowroot: 'open' }));
+        it('accepts `shadowrootmode`', () => {
+            const html = render(Template({ shadowrootmode: 'open' }));
 
-            expect(html).toContain('<template shadowroot="open">');
+            expect(html).toContain('<template shadowrootmode="open">');
         });
 
         it('allows other HTML attributes', () => {
@@ -124,9 +124,9 @@ describe('preact', () => {
             expect(html).toContain('<template id="my-template">');
         });
 
-        it('restricts `shadowroot` type', () => {
+        it('restricts `shadowrootmode` type', () => {
             // @ts-expect-error Wrong shadow root module.
-            expect(() => Template({ shadowroot: 'not-a-shadowroot-mode' }))
+            expect(() => Template({ shadowrootmode: 'not-a-shadowrootmode-mode' }))
                 .not.toThrow();
         });