bug(Layout): createEmptyStyleRule not adding nonce correctly in Chrome

[remcozigterman]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The style element that is created with the function createEmptyStyleRule does not have the CSP nonce when the site is serving in Chrome.

The nonce is added the following way:
mediaQueryStyleNode.nonce = nonce; see here

But it should be done this way I think:
mediaQueryStyleNode.addAttribute('nonce', nonce);

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-4szyku?file=src%2Findex.html
Steps to reproduce:

1. Create a new Angular project
2. Add ngCspNonce="RANDOM_CSP_NONCE_PLACEHOLDER" to the app-root component in index.html
3. Add Angular material to the project
4. Add an Material Module to the appComponent (for example: MatSlideToggleModule)
5. Serve the application and open the site in Chrome
6. Inspect the rendered HTML

Expected Behavior

<style type="text/css" nonce="RANDOM_CSP_NONCE_PLACEHOLDER"></style>

Actual Behavior

<style type="text/css"></style>

Environment

• Angular: 17.3.0
• CDK/Material: 17.3.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, MacOS

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}