- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 18 Mar 2015 15:30:30 -0700
- To: www-style list <www-style@w3.org>
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