289948 2025-03-18 04:19:40 -0700 Web Inspector: CSS is read-only when applied via adoptedStyleSheets 2025-05-17 01:02:10 -0700 1 1 1 Unclassified WebKit Web Inspector Safari Technology Preview All All RESOLVED DUPLICATE 277893 InRadar P2 Normal --- 1 hi webkit-unassigned inspector-bugzilla-changes koivisto rcaliman rik webkit-bug-importer oldest_to_newest 2103971 0 474601 hi 2025-03-18 04:19:40 -0700 Created attachment 474601 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. 2104000 1 hi 2025-03-18 06:48:02 -0700 I turned out you don’t even need the shadow root. Any styles applied via `adoptedStyleSheets` are read-only in Web Inspector. 2104055 2 webkit-bug-importer 2025-03-18 09:30:37 -0700 <rdar://problem/147322950> 2117857 3 hi 2025-05-16 23:08:41 -0700 Most likely a duplicate of https://bugs.webkit.org/show_bug.cgi?id=277893 2117869 4 rik 2025-05-17 01:02:10 -0700 *** This bug has been marked as a duplicate of bug 277893 *** 474601 2025-03-18 04:19:40 -0700 2025-03-18 04:19:40 -0700 Two shadowroots with different style attachment approaches index.html text/html 1073 hi PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+Cgk8bWV0YSBjaGFyc2V0PSJV VEYtOCI+Cgk8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRo LCBpbml0aWFsLXNjYWxlPTEuMCI+Cgk8dGl0bGU+U2hhZG93IHJvb3QgdXNpbmcgY29uc3RydWN0 YWJsZSBzdHlsZXNoZWV0czwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+Cgk8ZGl2IGlkPSJvbmUiPjwv ZGl2PgoJPHNjcmlwdD4KCQljb25zdCBob3N0T25lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQo J29uZScpOwoJCWNvbnN0IHJvb3RPbmUgPSBob3N0T25lLmF0dGFjaFNoYWRvdyh7IG1vZGU6ICdv cGVuJyB9KTsKCgkJY29uc3Qgc2hlZXQgPSBuZXcgQ1NTU3R5bGVTaGVldCgpOwoJCXNoZWV0LnJl cGxhY2VTeW5jKGAKCQkJZGl2IHsKCQkJCXdpZHRoOiAyNTZweDsKCQkJCWhlaWdodDogMjU2cHg7 CgkJCQliYWNrZ3JvdW5kLWNvbG9yOiB0b21hdG87CgkJCX0KCQlgKTsKCgkJY29uc3QgZGl2T25l ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7CgoJCXJvb3RPbmUuYWRvcHRlZFN0eWxl U2hlZXRzID0gW3NoZWV0XTsKCQlyb290T25lLmFwcGVuZENoaWxkKGRpdk9uZSk7Cgk8L3Njcmlw dD4KCgk8ZGl2IGlkPSJ0d28iPjwvZGl2PgoJPHNjcmlwdD4KCQljb25zdCBob3N0VHdvID0gZG9j dW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3R3bycpOwoJCWNvbnN0IHJvb3RUd28gPSBob3N0VHdvLmF0 dGFjaFNoYWRvdyh7IG1vZGU6ICdvcGVuJyB9KTsKCgkJY29uc3Qgc3R5bGUgPSBkb2N1bWVudC5j cmVhdGVFbGVtZW50KCdzdHlsZScpOwoJCXN0eWxlLnRleHRDb250ZW50ID0gYAoJCQlkaXYgewoJ CQkJd2lkdGg6IDI1NnB4OwoJCQkJaGVpZ2h0OiAyNTZweDsKCQkJCWJhY2tncm91bmQtY29sb3I6 IGxpZ2h0Z3JlZW47CgkJCX0KCQlgOwoKCQljb25zdCBkaXZUd28gPSBkb2N1bWVudC5jcmVhdGVF bGVtZW50KCdkaXYnKTsKCgkJcm9vdFR3by5hcHBlbmRDaGlsZChzdHlsZSk7CgkJcm9vdFR3by5h cHBlbmRDaGlsZChkaXZUd28pOwoJPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo=