Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.31.0

Current Behavior

Stencil components with shadow: { delegatesFocus: true } don't work as expected post-hydration, when rendered via DSD templates. This behavior is outlined in stenciljs/output-targets#618.

Expected Behavior

DSD tags for components withshadow: { delegatesFocus: true }should includeshadowrootdelegatesfocus` attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#shadowrootdelegatesfocus.

System Info

System: node 22.16.0
    Platform: darwin (24.5.0)
   CPU Model: Apple M3 Max (14 cpus)
    Compiler: /Users/haha/GitHub/apl/node_modules/@stencil/core/compiler/stencil.js
       Build: 1748044345
     Stencil: 4.31.0
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

• Build a Stencil component with shadow: { delegatesFocus: true }
• Use the component in a React Vite SSR application with Declarative Shadow DOM enabled.
• Observe the component's shadow root element in Chrome dev tools. It shows delegatesFocus: false.
• Inspect the page source code. The component's DSD <template> element is missing the shadowrootdelegatesfocus attribute.

Code Reproduction URL

https://github.com/stenciljs/output-targets/tree/main/example-project/react-app

Additional Information

No response