Bug 289948 – Web Inspector: CSS is read-only when applied via adoptedStyleSheets

• Component: Web Inspector
• Status: RESOLVED DUPLICATE

[Vadim Makeev]

Created attachment 474601 [details]
Two shadowroots with different style attachment approaches

When CSS is attached to a shadow root via `adoptedStyleSheets` (constructable stylesheets), the internal elements could not be debugged (styles modified).

```
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
	div {
		width: 256px;
		height: 256px;
		background-color: tomato;
	}
`);

root.adoptedStyleSheets = [sheet];
```

Styles are locked and marked as User Agent Stylesheet. But when styles are attached using DOM, everything is fine:

```
const style = document.createElement('style');
style.textContent = `
	div {
		width: 256px;
		height: 256px;
		background-color: lightgreen;
	}
`;

root.appendChild(style);
```

See the attached demo comparing to approaches.

[Vadim Makeev]

I turned out you don’t even need the shadow root. Any styles applied via `adoptedStyleSheets` are read-only in Web Inspector.

[Radar WebKit Bug Importer]

<rdar://problem/147322950>

[Vadim Makeev]

Most likely a duplicate of https://bugs.webkit.org/show_bug.cgi?id=277893

[Anthony Ricaud]

*** This bug has been marked as a duplicate of bug 277893 ***