Declarative shadow DOM does not work

[o-t-w]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Whatever CodeSandbox uses. I'm not sure how to run that command on CodeSandbox.

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/declarative-shadow-dom-in-next-js-xrg2zg?file=/app/thing.tsx:8,5

To Reproduce

Try using declarative shadow DOM:

 return (
    <div>
      <template shadowrootmode="open">
        <h2>This is in the shadow DOM</h2>
      </template>
    </div>
  );

Describe the Bug

I get the following error:

Error: Hydration failed because the initial UI does not match what was rendered on the server. 
Warning: Expected server HTML to contain a matching <template> in <div>.```

### Expected Behavior

Not get an error and render the shadow DOM. 

### Which browser are you using? (if relevant)

Chrome/Safari

### How are you deploying your application? (if relevant)

_No response_

[augustjk]

There's also related discussion here https://github.com/vercel/next.js/discussions/51717

[algora-pbc]

:wave: @ceIia added a bounty on this issue with algora! If the maintainers would like to accept it, here's the invitation.