0

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.

  • I have never been able to figure out exactly what the 'title' property is used for. its a configurable property, so even though its not directly writable, you can over-write it with a call to Object.defineProperty - but doing that seems to have no affect on anything other than what is shown in the inspector when looking at it. ¯\_(ツ)_/¯ I don't believe you are missing anything, i think this is just the unfortunate reality of working with a newish api that doesn't seem to get much attention. – diopside Aug 12 '23 at 22:20
  • Try suggesting it in W3C. BTW the inline ` – wOxxOm Aug 12 '23 at 22:40
  • Thank you @wOxxOm. I have gone ahead and created a [GitHub issue requesting a solution to this problem](https://github.com/WICG/webcomponents/issues/1024). – Will Nations Aug 12 '23 at 23:55

0 Answers0