[cssom] Make CSSStyleSheet constructable

An interesting problem has come up with the Web Components spec, which
we feel is most elegantly solved by making CSSStyleSheet objects
directly constructable.

The problem is simple.  Web Components has invented the concept of a
"TreeScope", which is a lightweight form of some of the guarantees you
get from separate documents - a TreeScope guarantees uniqueness across
its contained ids (and thus fast access), holds onto stylesheets, etc.
 Documents are TreeScopes, but so are the ShadowRoot objects used by
WebComponents.

The "scoping" nature of a TreeScope is good for preventing stray
styles from leaking out of the component, but it's problematic when
you have, say, a thousand copies of the same component on the page,
all of which contain their own, identical, copies of the same
stylesheet.  This is a non-trivial memory cost, and we'd like to avoid
it by allowing scopes to share stylesheets in some way.

Our attempts to date have been somewhat hacky, unfortunately.  It
seems like the best path to get this is to allow CSSStyleSheets to be
directly constructed in JS, so that a single sheet can be added to the
TreeScope#styleSheets list of multiple components.

The details seem reasonably simple.  It seems there are two cases for
construction - constructing via URL, and constructing via stylesheet
string.  The latter is easy, and seems like the most natural route for
the normal constructor to take.  The former is more difficult, due to
timing issues (currently, there's no such thing as an uninitialized
CSSStyleSheet object), but I can see fairly simple ways around this.
(Alternately, we could simply avoid the problem, and require you to
XHR the stylesheet and construct the CSSStyleSheet object from the
document's text.)

Does this seem sane to other people?  Thoughts?

~TJ

Received on Thursday, 18 October 2012 00:17:47 UTC