Bug: Duplicate <style> tags per component instance with serializeShadowRoot: 'scoped' in Next.js runtime SSR

[Armand-Lluka]

Bug Description

When using serializeShadowRoot: "scoped" with the Next.js runtime-based SSR approach, each component instance renders with duplicate <style> tags in the server-rendered HTML. This leads to unnecessary bloat in the SSR output and potential performance issues.

Reproduction

Setup

• Next.js 15 with React 19
• @stencil/react-output-target with runtime-based SSR
• Stencil component with shadow: true and scoped styles
• Using serializeShadowRoot: "scoped" option

Steps to Reproduce

1. Create a Stencil component with shadow DOM and styles (e.g., my-counter)
2. Set up Next.js runtime SSR with serializeShadowRoot: "scoped"
3. Render multiple instances of the same component on a page
4. View the SSR'd HTML source

Demo Code

A demonstration page has been created in the local branch demo/scoped-style-duplication-bug:

• File: example-project/next-15-runtime-based/src/app/dedup-test/page.tsx
• Renders: 5 instances of <MyCounter /> component

import { MyCounter } from 'component-library-react/next';

export default function DedupTest() {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>Style Deduplication Test</h1>
      <p>This page renders 5 instances of MyCounter to demonstrate style deduplication.</p>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <MyCounter />
        <MyCounter />
        <MyCounter />
        <MyCounter />
        <MyCounter />
      </div>
    </div>
  );
}

Expected Behavior

When rendering 5 instances of MyCounter, the scoped styles should be deduplicated:

• ✅ Expected: Single <style> tag (or shared style component) for all instances
• ✅ Expected: Lightweight instance wrappers that reference the shared styles

Actual Behavior

Currently, each component instance gets its own duplicate <style> tag:

• ❌ Actual: 5 instances = 5 identical <style> tags
• ❌ Actual: Each instance wrapper includes the full CSS

Performance Issues

• HTML Bloat: With N instances, styles are duplicated N times
• Bandwidth: Larger SSR payloads, especially for components with extensive styles
• Parse Time: Browser has to parse duplicate style blocks
• Memory: More DOM nodes than necessary

Environment

• Package: @stencil/react-output-target
• Version: Latest (main branch)
• Framework: Next.js 15 + React 19
• SSR Mode: Runtime-based with serializeShadowRoot: "scoped"

Verification

To verify this bug:

1. Checkout the demo branch: git checkout demo/scoped-style-duplication-bug
2. Build the component library: cd example-project/component-library && npm run build
3. Build the React library: cd ../component-library-react && npm run build
4. Run Next.js dev server: cd ../next-15-runtime-based && npm run dev
5. Navigate to /dedup-test
6. View page source (disable JavaScript to see pure SSR output)
7. Search for <style> tags - you'll find 5 duplicate blocks

[github-actions]

We need a minimal reproduction to be able to triage this issue.

Why do we need a minimal reproduction?

Reproductions allow the team to triage and fix issues quickly with a tiny team. They help us identify the source of the problem and verify that the issue is not caused by something specific to your project.

How can I create a reproduction?

Please use one of the following starter templates to create a minimal reproduction:

Framework	CodeSandbox Template
Angular	stencil-angular-starter
NextJs	stencil-starter-next
React	stencil-starter-react
Vue	stencil-starter-vue

A reproduction should be as minimal as possible. This means removing any code that is not directly related to the issue. The less code there is, the easier it is to identify the problem.

You can also provide a link to a public GitHub repository that demonstrates the issue.

What happens next?

• If you provide a valid reproduction link, this issue will be triaged and addressed based on priority.
• If no reproduction is provided within 7 days, this issue may be automatically closed.
• You can always reopen the issue by providing a reproduction link.

---

Resources:

• How to create a Minimal, Reproducible Example
• The Importance of Reproductions

[johnjenkins]

thanks for raising!
I think maybe you forgot to link the repro?

I don't have time to look into it atm, but I think this is just be a limitation of the current next implementation;
each component is rendered as a self-contained ... component :D - there's no current way to render anything globally for global use. We would need to setup some kind of central store / style component to render global <style> to