Re: [cssom] Make CSSStyleSheet constructable

On Fri, Oct 19, 2012 at 11:38 AM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
> On 10/19/12 1:47 PM, Tab Atkins Jr. wrote:
>>
>> Components are likely to be different.  Since they all run identical
>> script
>
>
> Except they don't necessarily, because they can run script in response to
> user interaction, no?
>
>
>> Thus, we feel that simply relying on copy-on-write optimizations will lead
>> to a bad place
>>
>> where performance is normally great, but one small tweak to your
>> scripts will throw it in the toilet as you suddenly generate a
>> thousand separate stylesheets on production pages.
>
>
> Right, but with your proposal you'd have multiple scripts running on the
> same sheet...  You'd basically need cooperation from outside the component
> to get the sheet shared across all instances _and_ all the instances would
> have to be careful to not "tweak" it, right?

Right. Sorry, I feel like I enthused Tab to start talking about a
specific solution to a larger problem, and in that may have
accidentally the whole problem.

As Tab mentioned, I want (at least I think I do?) to have an explicit
indication of whether the stylesheets are shared partly because it
allows the script to know if it's a good idea to tweak this stylesheet
(which clearly it is not).

Another reason to think about this is a low-level hook for the
stylesheets, declared for more than one element. In a file that
declares multiple components, an external stylesheet is applied to all
of the declarations:

<link rel="stylesheet" href="x-tags/css/themes/dark-and-stormy-night.css" ...
<element name="x-panel" ...
    <template ...
<element name="x-tabbox" ...
 ...

>From the perspective of Shadow DOM in each individual component, the
"dark-and-stormy-night.css" is something that just magically appears
as a member in styleSheets
(http://www.w3.org/TR/shadow-dom/#api-shadow-root-style-sheets). That
seems sub-optimal, because it's not possible to implement without
magic (like, for a browser that only supports Shadow DOM or some
alternative implementation that doesn't use custom DOM elements).

That's why having an API to explicitly add CSSStyleSheet instances to
ShadowRoot.styleSheets seems like a good idea.

I am happy to hear any cool/awesome suggestions.

>
> What are the use cases for components changing the CSSOM of their sheets?
> Do we know any?

I am not sure if this will happen a lot in the wild, but in the very
first sample code I wrote for Web Components, I needed tweaking
stylesheets to apply styles to the currently selected tab:

https://github.com/dglazkov/Web-Components-Polyfill/blob/master/samples/tabs/tabs-component.html#L221

:DG<

>
> -Boris
>

Received on Friday, 19 October 2012 20:51:11 UTC