Setting innerHTML of `<style>` elements will cause issues with trusted types

[terrymun]

Bug report

Current Behavior

There are several Radix UI Primitives that rely on dangerouslySetInnerHtml to inject content into <style> tags, for example the <ScrollArea> (see code) and <Select> (see code) components.

This causes issues in React apps that has set trusted types in their CSP headers.

p/s: Not all browsers support the trusted types CSP header yet.

Expected behavior

Using these components should not cause warnings in browsers that support trusted types CSP headers serving a React App with such headers set.

Suggested solution

• Find alternatives to using dangerouslySetInnerHtml to set inline styles
• Use DOMPurify (but that comes at a cost of using a very heavy library)

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-scroll-area, @radix-ui/react-select	Latest on both
React	n/a	19 (via Next.js)
Browser	Chrome	128
Assistive tech	n/a	n/a
Node	n/a	20.14.0
pnpm	n/a	9.10.0
Operating System	macOS	Sonoma (14.6.1)

[prests]

Hi,

I opened a discussion on improving Radix's style authoring to fix these CSP issues. Perhaps we can get more buy-in via more engagement: https://github.com/radix-ui/primitives/discussions/3130