Using a strict CSP throws errors for some components

What is affected?

Component

Description

When using a strict CSP (i.e with a nonce or without 'unsafe-inline'), I would except no errors to be thrown in the console. However, some components are including styles in a way that is incompatible with a strict CSP.

In the console I get the following error:

lit-html.ts:1836 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-random' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-EDKRS+IvBWVSFJYjnWOymFAGVOawal4UoghutFq1ngI='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

The source seems to be adding a style attribute directly to an element. For example, main/textfield/internal/text-field.ts adds style=${styleMap(style)} to the textarea- and input-elements.

Reproduction

An error is thrown in the console about chrome refusing to apply an inline style because it violates the CSP. I've added a simple example in the lit.dev playground:
https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi90ZXh0ZmllbGQvb3V0bGluZWQtdGV4dC1maWVsZC5qc1wiOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG5cbjxoZWFkPlxuICA8bWV0YSBodHRwLWVxdWl2PVwiQ29udGVudC1TZWN1cml0eS1Qb2xpY3lcIiBjb250ZW50PVwic3R5bGUtc3JjICdzZWxmJ1wiPlxuPC9oZWFkPlxuXG48c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL21hdGVyaWFsLWltcG9ydHMuanNcIj48L3NjcmlwdD5cblxuPG1kLW91dGxpbmVkLXRleHQtZmllbGQgbGFiZWw9XCJTb21lIGxhYmVsXCI-PC9tZC1vdXRsaW5lZC10ZXh0LWZpZWxkPlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

I have only tested the text-field component, but other components that also add styles directly to elements are: linear-progress, slider and menu. I would guess the issue also affects those components as well.

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

@material/web@1.0.1

Browser/OS/Node environment

Browser: Google Chrome 118.0.5993.88
OS: MacOS 13.5.2
Node: v20.8.0

Start by reproducing the strict-CSP example in the linked lit.dev playground, then inspect the styleMap binding in main/textfield/internal/text-field.ts and the analogous linear-progress, slider, and menu components. Done means those components no longer produce the reported CSP console error when used with a nonce or without 'unsafe-inline'; check the affected components in the browser reproduction.