- From: Will Nations <notifications@github.com>
- Date: Sat, 12 Aug 2023 16:53:56 -0700
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/1024@github.com>
(Initially presented on [this StackOverflow question](https://stackoverflow.com/questions/76891063/is-there-a-way-to-assign-a-title-to-a-constructed-stylesheet-so-that-the-given-t)) 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. -- Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/1024 You are receiving this because you are subscribed to this thread. Message ID: <WICG/webcomponents/issues/1024@github.com>
Received on Saturday, 12 August 2023 23:54:03 UTC