[cssom] Constructable Stylesheets

Draft spec: http://tabatkins.github.io/specs/construct-stylesheets/

When dealing with Shadow DOM-related things, we've found that the
existing ways to style a component are somewhat suboptimal.  In
particular, the standard way to style a component is to insert a
<style> element into its shadow tree during initialization.  If you
create a bunch of instances of this component, though, that means you
have a bunch of identical <style> elements cluttering up your DOM and
making things more expensive.

Browsers have deduping heuristics to help this somewhat and avoid
storing duplicate style data, but they're not 100% reliable, and even
if they work, you can't avoid the duplicate *elements* and all their
duplicated text cluttering up the DOM.  It would be great if there was
a more explicit way to share styles across instances of a component.

To address this, I've started a draft spec for adding a constructor to
the CSSStyleSheet interface (linked above), plus an interface for
adding a constructed stylesheet to a TreeScope (a document or shadow
tree).  This way, the first instance of the component to be
initialized can create a stylesheet, add it to itself, and then stash
it away someplace later instances can find it. Since they're all using
the same stylesheet, deduping should happen automatically within the
style system, and the text of the stylesheet is only stored once, in
the one instance of the object.

This also opens up possibilities for more controls on stylesheets.  In
the document, I've outlined one such case, where we can solve one of
the "incorrect" uses of >>> (basically, providing "user-agent" level
styles for custom elements) in a more direct and meaningful way.

Thoughts?

~TJ

Received on Wednesday, 18 March 2015 22:36:46 UTC