Updates Template component to allow all the common HTML attributes.

For some reason, `createElement()` falls apart here. I think it's inferring possible tag names from the input properties and not finding any matches. I could define a new intrinsic, but I don't want to leak that into user code, since that's inherently a global modification.

packages/preact/index.mts

@@ -1,4 +1,4 @@
-import { VNode, createElement, ComponentChildren } from 'preact';
+import { JSX, VNode, createElement } from 'preact';
 import { render } from 'preact-render-to-string';
 import * as rulesPrerender from 'rules_prerender';
 
@@ -49,10 +49,13 @@ export function inlineStyle(importPath: string, meta: ImportMeta): VNode {
     return createElement('rules_prerender:annotation', {}, [ annotation ]);
 }
 
+interface TemplateProps extends JSX.HTMLAttributes<HTMLTemplateElement> {
+    shadowroot?: ShadowRootMode;
+}
+
 /** A component representing the native HTML `<template />` tag. */
-export function Template({ children, ...attrs }: {
-    children?: ComponentChildren,
-    [attr: string]: unknown,
-} = {}): VNode {
-    return createElement('template', { children, ...attrs });
+export function Template({ children, ...attrs }: TemplateProps = {}): VNode {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore JSX types are weird AF.
+    return createElement('template', attrs, children);
 }

packages/preact/index_test.mts

@@ -69,16 +69,38 @@ describe('preact', () => {
     describe('Template', () => {
         it('renders a `<template />` element', () => {
             const html = render(Template({
-                shadowroot: 'open',
                 children: [
                     createElement('div', {}, [
                         'Hello, World!',
                     ]),
                 ],
             }));
 
-            expect(html).toContain('<template shadowroot="open">');
+            expect(html).toContain('<template>');
             expect(html).toContain('<div>Hello, World!</div>');
         });
+
+        it('accepts `shadowroot`', () => {
+            const html = render(Template({ shadowroot: 'open' }));
+
+            expect(html).toContain('<template shadowroot="open">');
+        });
+
+        it('allows other HTML attributes', () => {
+            const html = render(Template({ id: 'my-template' }));
+
+            expect(html).toContain('<template id="my-template">');
+        });
+
+        it('restricts `shadowroot` type', () => {
+            // @ts-expect-error Wrong shadow root module.
+            expect(() => Template({ shadowroot: 'not-a-shadowroot-mode' }))
+                .not.toThrow();
+        });
+
+        it('disallows unknown attributes', () => {
+            // @ts-expect-error Unknown attribute.
+            expect(() => Template({ notAnAttribute: 'test' })).not.toThrow();
+        });
     });
 });