I've been using Constructable Stylesheets for web components. Thus far I've been frontloading them all into a singleton and mass sharing them across the Document and every component's ShadowRoot. This works well behavior-wise, and I have URLs and names associated with each stylesheet in my singleton; however, when viewing the rules affecting an element in the Google Chrome inspector, all it says for the source is "constructed stylesheet". If possible, I'd like to know how I can configure the CSSStyleSheet
instances so that the source text more accurately conveys from which file or CSSStyleSheet instance the rule is originating.
When examining the MDN documentation for StyleSheet and CSSStyleSheet, the only instance properties that seemed to provide identifying information were href
and title
, both of which are read-only properties from the base class with no apparent way of setting them from the CSSStyleSheet
constructor.
Is there something I'm missing?
Edit: I am aware of this question/answer that wishes to know how to uniquely inject Constructable StyleSheets, but my singleton already fulfills the answer there. That question does nothing to actually resolve the problem of associating a particular Constructable StyleSheet instance with information rendered in the browser dev tools.