Provide a means of identifying Constructable StyleSheet instances from browser dev tools.

[Will Nations]

(Initially presented on this StackOverflow question)

TLDR: I would like to have a means of identifying from which CSSStyleSheet instance a given rule originates when viewing an element's styles in browser dev tools.

Constructable StyleSheets are presented as the "solution" for sharing reusable styles between web component instances, across different types of web components, and between both light and shadow DOMs as a whole. Seeing the advantage of them, I proceeded to re-implement all of my web component styles using them.

Now though, whenever I attempt to view an element in the Google Chrome inspector, any CSS rules associated with these CSSStyleSheet instances are stated to come from a "constructed stylesheet." No more details are provided. The CSSStyleSheet constructor does not let me pass in identifying information about the instance. I also have no writable properties to which I can assign such information (base class's title and href properties are read-only and are not part of the constructor). I do not even know if web browsers would natively display that information were I able to provide it.

In this situation, the only means I have of finding the source code responsible for creating the rule(s) is to run text searches in my source code project. The difficulty is compounded when the generated output rules are often somewhat different from how it is presented in source code (due to things like PostCSS preprocessors, etc.). This is a major quality of life hindrance compared to the more convenient, but less performant alternative of inlining CSS style tags in every component's ShadowRoot instance.

[Andy Earnshaw]

FYI there is an open bug for this on the Chromium tracker here: https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=&can=4

I don't think this is a spec issue, but rather a limitation of how replaceSync works in Chrome.

[Will Nations]

Oh, that is good to know (kinda, considering it was opened back in February, hehe). Then from what I've gathered, the inline styles' comment-based technique of using /*# sourceURL=foo://bar/file.css */ will be a way for us to set an ID that is rendered by browsers (once the mentioned bug is fixed)? Does this need to actually map to some concrete source file that exists, or will it just display whatever the value is so long as it is a valid URI?

[Andy Blum]

Just tried this out, and it seems to work only in Chrome, but if you construct a new CSSStyleSheet with an options object containing a title, it'll appear in the devtools. This doesn't solve the sourcemaps issue, but it is a way to at least to try to decipher which constructed stylesheet you're digging into.

(() => {
  const sheet = new CSSStyleSheet({title: 'test sheet'});
  sheet.replaceSync('* {color: red;}');
  return sheet;
})();

Edit: While the title does go into the CSSStyleSheet's title property, this also appears to prevent the styles in the sheet from applying.

[Justin Fagnani]

but rather a limitation of how replaceSync works in Chrome

I wonder if browsers could automatically capture the URL of the file that called new CSSStyleSheet(). Firefox has a jump-to-definition feature for calls to customElements.define(), this doesn't seem that different.

[Jochen Kühner]

hopefully when the style is loaded via "import ... { with { type: 'css' } }" the browser would display the filename